Простой html макет страницы
Простой html макет страницы. Здравствуйте, сегодня мы покажем и напишем, вам макет простой html странице, основанную на div блоках, с использование css так сказать покажем вам основу блочной верстки с которой вы начнете творить свое искусство и делать свои стильные красивые шаблоны, данный макет будет состоять из стандартных элементах таких как шапка, сам контент, левый правый сайт бар, и конечно же подвал и так приступим к написанию макета…
Первое что мы сделаем это создадим разметку на html, и так создаем файл с название index.html
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Заголовок страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Описание страницы." /> <meta name="keywords" content="ключевые слова страницы" /> <link href="css/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Шапка сайта</div> <div id="content"> <div id="left">Левые блоки</div> <div id="right">Правые блоки</div> <div id="center">Центральная часть</div> </div> <div class="clear"></div> <div id="footer">Содержимое подвала</div> </body> </html> |
Готово
Теперь нам надо все это красиво расположить сверстать для этого создадим фал
styles.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#left { float: left; // Левые блоки размещаем слева width: 200px; // Установка ширины 200 пикселей } #right { float: right; // Правые блоки размещаем справа width: 200px; // Установка ширины 200 пикселей } #center { margin-left: 200px; // Отступ слева 200 пикселей margin-right: 200px; // Отступ справа 200 пикселей } .clear { clear: both; // Отменяем позиционирование (влияние float) } |
Готово…
В этом уроке был показан Простой html макет страницы, вы можете использовать этот макет как вам угодно а также можете изменять его как вам нужно надеемся данная статья помогла вам…..