Я расскажу, как верстать шаблон на примере простого макета:
Теперь начнем его верстать.
Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"
В результате у вас должен быть примерно такой html-файл:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css"> </link></head> <body> <div id="main"> <div id="header"> Шапка </div> <div id="sidebar1"> Сайдбар 1 </div> <div id="sidebar2"> Сайдбар 2 </div> <div id="text"> Это будет центральный блок с текстом </div> <div class="clear"></div> <div id="footer"> Ну а это наш подвал </div> </div> </body> </html>
В нем первым делом создаем пустые описания наших классов и id:
#main { } #header { } #text { } #sidebar1 { } #sidebar2 { } #footer { } .clear { }
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:
#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}
Сохраняем CSS и открываем html-файл в каком-нибудь браузере. Все, что у нас написано, должно быть выравнено по центру.
Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:
#header
{
background:green;
height:300px;
width:100% //шапка занимает все 980px в ширину
}
Установим наш блок с текстом по центру:
#text
{
background:#999; //серый фон
position:relative; //опять выравниеваем по центру
margin:0 auto;
width:600px;
}
Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:
#sidebar1
{
width:190px;
background:yellow;
float:left;
}
#sidebar1
{
width:190px;
background:yellow;
float:right;
}
Теперь нам осталось настроить только подвал и класс clear, который нам нужен, чтобы "сообщить" браузеру о том, что у нас закончились блок с текстом и сайдбары
.clear
{
clear:both;
}
Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.
Теперь подвал:
#footer
{
background:red;
width:100%;
height:100px;
}
В результате должна получится вот такая css:
body { margin:0; padding:0; color:#000; background:#fff } #main { position:relative; margin:0 auto; width:980px; } #header { height:300px; background:green; } #text { margin:0 auto; background:#999; width:600px; } #sidebar1 { width:190px; background:yellow; float:left; } #sidebar2 { width:190px; background:yellow; float:right; } #footer { background:red; width:100%; height:100px; } .clear { clear:both; }
Комментариев нет:
Отправить комментарий