Поделиться
160. Создание разметки страницы с помощью CSS.doc
Лабораторная работа № 4
Создание разметки страницы с помощью CSS
Сегодня мы
продолжим эксперимент с раскрашиванием колонок web страницы. В прошлый раз мы создали
страницу с тремя колонками и задали для центральной колонки один фоновый цвет,
а для правой и левой – другой.
Естественно,
не очень удобно, что боковые колонки всегда одного и того же цвета. Исправляем
этот недостаток.
Напомню, главная проблема заключается в том, что колонки имеют разную длину,
которая может изменяться. Поэтому использовать свойство background-color колонок мы не
можем.
В прошлый раз с помощью дополнительного блока (<div id="mfooter"></div>) мы растянули центральную колонку так, что она стала длиннее боковых колонок.
Таким образом, мы смогли задать фон для центральной колонки, а для боковых колонок использовался фоновый цвет, заданный для тега <body>.
Основное достоинство этого приема в том, что разметка страницы остается практически неизменной. Но сейчас придется немного усложнить разметку.
Идея очень простая. Добавим дополнительный блок (container), внутри которого будут находиться левая и центральная колонки.
?
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div id="header">Заголовок</div> <div id="rightbar">Правая колонка<br />Правая колонка<br /></div> <div id="container"> <div id="leftbar">Левая колонка</div> <div id="middlebar"> Центральная колонка <div id="mfooter"></div> </div> </div> <div id="footer">Хвостовик</div> </body> |
Теперь мы можем задать фон левой колонки, используя свойство background-color контейнера, а правая колонка будет иметь цвет фона, заданный в свойстве background-color тега <body>.
Посмотрите на таблицу стилей.
?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
body { margin: 0; color: #263b56; background-color: #b8a928; font-family: Verdana, sans-serif; }
#header { margin: 0; color: #ffffff; padding: 5px 5px 5px 5px; background-color: #3b4d73; } #rightbar { margin: 0; padding: 5px 5px 5px 5px; float: right; width: 30%; }
#container { margin: 0; background-color: #96af39; width: 65%; }
#leftbar { padding: 5px 5px 5px 5px; margin: 0; float: left; width: 40%; }
#middlebar { margin: 0px 0px 0px 45%; padding: 5px 5px 5px 5px; background-color: #d6d279; }
#mfooter { clear: both; }
#footer { margin: 0; color: #ffffff; padding: 5px 5px 5px 5px; background-color: #3b4d73; } |
Мы задали ширину контейнера так, чтобы он вмещал левую и центральную колонки (строки 24). Кроме того, мы установили правый отступ у центральной колонки равным нулю (строка 35), т.к. край этой колонки должен совпадать с правым краем контейнера.
Если вы посмотрите стили левой колонки в прошлом примере, то заметите, что в этот раз ее ширина увеличилась вдвое. Ничего удивительного, сейчас ширина колонки составляет 40% ширины контейнера, а в прошлый раз – 20% окна браузера. Учитывая, что ширину блока container мы задали равной 65% ширины окна браузера, то получается примерно одинаково.
Взгляните на скриншот в начале страницы. Как я и говорил, цвет левой колонки задается свойством background-color блока container (строка 23). Цвет правой – свойством background-color тега <body> (строка 4). А цвет центральной – ее собственным свойством background-color (строка 37).
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
