Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем
task02.css, а HTML-код — в файл task02.htm.
Файлы сохраняйте в каталоге, который укажет учитель.
В этом каталоге есть подкаталог
pic, в котором содержатся картинки.
Файл task02.css
/* Стили HTML
----------
Цвет текста и фона
Центрирование BODY для IE-5 */
HTML
{
}
/* Стили BODY
----------
Относительное позиционирование: чтобы смещения
абсолютно позиционированного потомка incut (врезка)
отсчитывать от BODY, а не от HTML.
Выравнивание текста слева (отмена центрирования в HTML)
Внутренний отступ в 10 пикселов
Внешний отступ в 10 пикселов сверху и снизу,
центрирование BODY по горизонтали.
Уменьшенный шрифт Georgia (если нет, то любой с засечками)
Серая сплошная рамка толщиной в 1 пиксел
Ширина области содержимого -- 750 пикселов (применить
трюк для правильной работы IE5)
*/
BODY
{
}
/* Заголовочная часть
------------------
Относительное позиционирование: чтобы смещения
абсолютно позиционированных потомков (logo и title)
отсчитывать от header, а не от BODY.
Высота блока: 110 пикселов
Фоновая полоска внизу блока
*/
.header
{
}
/* Логотип
-------
Абсолютное позиционирование (относительно .header)
Смещение вверх на 5 пикселов
*/
.header .logo
{
}
/* Заголовок
---------
Абсолютное позиционирование (относительно .header)
Смещение вправо на 218 пикселов
Смещение вниз на 15 пикселов
*/
.header .title
{
}
/* Врезка
------
Абсолютное позиционирование в (10,131) относительно BODY
Внутренний отступ в 10 пиеселов
Шрифт Verdana или другой без засечек,
уменьшенный на 20%
Ширина области содержимого -- 190 пикселов (применить
трюк для правильной работы IE5)
*/
#incut
{
}
/* Фото
----
Нулевой внешний и внутренний отступ сверху
*/
#incut .andersen
{
}
/* Выделения EM внутри врезки
--------------------------
Жирный шрифт
*/
#incut EM
{
}
/* Основное содержимое
-------------------
Внутренний отступ слева в 220 пикселов
Фоновая полоска слева (ложная колонка для врезки)
*/
#content
{
}
/* Заголовки
Цвет #009900
*/
#content H2,H3,H4,H5,H6
{
}
/* Заголовок H2
Нулевой внешний отступ сверху
Внутренний отступ сверху в 10 пикселов
*/
#content H2
{
}
/* Стили подвала
-------------
Внутренний отступ сверху в 10 пикселов
Серая сплошная рамка сверху в 1 пиксел
Запрет переноса строки
Курсивный шрифт
*/
#content #footer
{
}
/* Приближаем заголовок к своему абзацу
Внешний отступ для заголовка снизу 0.2em
Внешний отступ для абзаца:
сверху -- 0.2em
слева и справа -- 0
снизу -- 1em
*/
H2,H3,H4,H5,H6
{
}
P
{
}
Файл task02.htm
