Урок 4. Ширина и высота слоёвВ предыдущем уроке нами было создано три блока, которые мы раскрасили в разные цвета. Сейчас HTML-страница выглядит так:
Теперь нужно задать слоям ширину и высоту, делается это следующим образом - откройте файл style.css допишите там атрибуты высоты и ширины для первого (красного) слоя. /* таблица стилей */
/* задаем размещение блоков */ #1 { background:red; width:800px; height:100px; } #2 { background:gray } #3 { background:blue } Сохраните документ и посмотрите как теперь выглядит страница:
Как видите слой изменил свои размеры, задайте размеры для остальных слоёв: /* таблица стилей */
/* задаем размещение блоков */ #1 { background:red; width:800px; height:100px; } #2 { background:gray; width:140px; height:300px; } #3 { background:blue; width:650px; height:300px; } Давайте сейчас для удобства изменим названия наших блоков, первый блок назовем header, второй - menu и третий блок станет content, в итоге получим следующие коды: Код страницы index.html <html>
Код таблицы стилей style.css
<head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header">Первый блок</div> <div id="menu">Второй блок</div> <div id="content">Третий блок</div> </body> </html> /* таблица стилей */
/* задаем размещение блоков */ #header { background:red; width:800px; height:100px; } #menu { background:gray; width:140px; height:300px; } #content { background:blue; width:650px; height:300px; } Теперь будем считать, что блок header - это шапка страницы, menu - это меню и content - содержание (контент). Переходим к 5-ому уроку, где мы соберём все три блока в одном. Уроки по CSS (дивный дизайн) Урок 1. Делаем сайт на div-ах
|
