Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем
task01.css, а HTML-код — в файл task01.htm.
Файлы сохраняйте в каталоге, который укажет учитель.
В этом каталоге есть подкаталог
pic, в котором содержатся картинки.
Файл task01.css
/* Стили HTML
----------
Центрирование BODY для IE5
Фон цвета #e5e5e5
*/
HTML
{
}
/* Стили BODY
----------
Относительное позиционирование (для отсчета смещений заголовка)
Выравнивание текста слева (отмена центрирования в HTML)
Нулевой внутренний отступ
Внешний отступ в 10 пикселов сверху и снизу,
центрирование BODY по горизонтали.
Сплошная рамка цвета #638F7B толщиной в 1 пиксел
Ширина области содержимого -- 750 пикселов (применить
трюк для правильной работы IE5)
Уменьшенный шрифт Georgia (если нет, то любой с засечками)
Черный текст на белом фоне
*/
BODY
{
}
/* Заголовочная часть
------------------
Относительное позиционирование (для отсчета смещений заголовка)
Высота блока -- 160 пикселов
Фоновый цвет #ffedc3 и фоновая картинка pic/az.png,
смещённая вправо и на 1 пиксел вниз (без повторений)
Нулевые внешние и внутренние отступы
Сплошная рамка снизу цвета #638F7B толщиной в 1 пиксел
*/
H1
{
}
/* Картинка в заголовочной части
-----------------------------
Абсолютное позиционирование в (10,10)
*/
H1 IMG
{
}
/* Оболочка для содержания и боковой панели
----------------------------------------
Ширина -- 100% (для IE, который может не понять по умолчанию)
Плавающий элемент, прилипание слева
Ложная колонка: фоновая картинка pic/bg.png, повторенная
по вертикали справа
*/
#wrapper
{
}
/* Общие свойства блока содержания и боковой панели
------------------------------------------------
Внутренний отступ в 10 пикселов со всех сторон
*/
#content, #sidebar
{
}
/* Содержание
----------
Плавающий элемент, прилипание слева
Ширина области содержимого -- 449 пикселов (применить
трюк для правильной работы IE5)
(На самом деле нужно было бы объявить ширину в 450 пикселов,
но IE плохо считает, 1 пиксел -- фора для него, чтобы он
не решил, что ширина блока содержания и ширина боковой панели
в сумме не превышают ширину BODY)
*/
#content
{
}
/* Боковая панель
--------------
Плавающий элемент, прилипание слева
Ширина области содержимого -- 270 пикселов (применить
трюк для правильной работы IE5)
*/
#sidebar
{
}
/* Подвал
------
Прекращение обтекания
Внутренние отступы:
0 -- сверху
10 пикселов -- слева и справа
2 пиксела -- снизу
Белый текст на фоне цвета #ff7604
Сплошная рамка цвета #638F7B сверху толщиной в 1 пиксел
Шрифт Trebuchet MS или другой без засечек с
уменьшением размера на 20%
Запрет на разрыв строки
*/
#footer
{
}
/* Для устранения элементов при включённом CSS
-------------------------------------------
Удалить из документа элемент с данным классом
*/
.none
{
}
/* Выделение
---------
Насыщенность шрифта bold
*/
EM
{
}
/* Маркированный список
----------------------
Маркер списка -- картинка pic/marker.gif
*/
UL LI
{
}
/*
Приближаем заголовок к своему абзацу
------------------------------------
*/
H2,H3,H4,H5,H6 {margin-bottom:0.2em;}
P {margin:0.2em 0 1em;}
/* Размеры заголовков
------------------
*/
H2 {font-size:1.4em;}
H3 {font-size:1.2em;}
Файл task01.htm
