Урок 4. Ширина и высота слоев (div)

Рубрика: Уроки CSS
Метки/Tags: , , ,

В предыдущем уроке нами было создано три блока, которые мы раскрасили в разные цвета. Сейчас хтмл-страница выглядит так:

Теперь нужно задать слоям ширину и высоту, делается это следующим образом - откройте файл 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>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<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>

код таблицы стилей style.css

/* таблица стилей */
/* задаем размещение блоков */
#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-ому уроку, где мы соберем все три блока в одном блоке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS



Комментариев нет
<NOINDEX>

Оставить комментарий

</NOINDEX>



« Уроки CSS для новичков
Урок 5. Собираем 3 блока в один (в 4-й) »


Связанные записи

Все записи