Позиционирование блоков. Нормальный поток
В предыдущем уроке мы узнали, что блоки нужны для создания html-документов. Современная веб-страница, состоит из нескольких блоков, которые каким-либо образом размещены на ней. Сейчас мы будем делать страницу в интернете при помощи блоков. Создаём html-документ следующего содержания:
Теперь зададим таблицу стилей для этой страницы. Каждый блок выделим разным цветом, чтобы можно было их различить.
#header{
margin:0 auto;
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
margin:0 auto;
background-color:#ffcc66;
width:800px;
height:30px;
}
#content{
margin:0 auto;
background-color:#ffccff;
width:800px;
height:400px;
}
#footer{
margin:0 auto;
background-color:#ffff33;
width:800px;
height:50px;
}
Блоки в html-документе мы разместили в нормальном потоке, то есть на странице они отображаются по порядку один под другим. В самом верху - header - заголовок html-документа. В большинстве сайтов он имеется. Обычно там находится баннер и/или большими буквами написано название проекта и/или лозунг (основная идея) этого проекта. Под ним идет блок с идентификатором topmenu, в нём размещены ссылки на основные страницы сайта (здесь 4 штуки), которые в примере отсутствуют. Затем следует блок content, его содержимое, обычно - статья, может быть, лента новостей и прочее. В самом низу расположился блок с идентификатором footer - подвал. В этой части страницы чаще всего пишут о защищённых правах и оставляют почтовый ящик. Каждому блоку присвоен именно идентификатор, а не класс, так как каждый блок на странице является уникальным.
В таблице стилей каждый блок мы выровняли по центру при помощи свойства margin и задали размеры с помощью свойств width (задаёт ширину блока) и height (задаёт высоту). Цвет блоков и текста в них задали, используя свойства color и background-color. Также в блоке topmenu текст разместили по центру с помощью свойства text-align.
Увидеть получившуюся веб-страницу можно, нажав сюда.
2012 год.