Не меняя HTML-код (оперируя только CSS), создайте оформление, вид которого показан на рисунке в конце этой страницы.
Стилевые определения записывайте в отдельный файл с именем
task02.css, а HTML-код — в файл task02.htm.
Файлы сохраняйте в каталоге, который укажет учитель.
В этом каталоге есть подкаталог
pic, в котором содержатся картинки.
Файл task02.css
/* Стили HTML
----------
Фон цвета #f4e9e6
*/
HTML
{
}
/* Стили BODY
----------
Относительное позиционирование (для отсчета смещений заголовка)
Нулевой внутренний отступ
Внешний отступ в 10 пикселов со всех сторон
Сплошная рамка цвета #638F7B толщиной в 1 пиксел
Уменьшенный шрифт Georgia (если нет, то любой с засечками)
Цвет текста #2A3D34
Белый цвет фона
Ограничение минимальной ширины в 760 пикселов
*/
BODY
{
}
/* Заголовочная часть
------------------
Относительное позиционирование (для отсчета смещений заголовка)
Высота блока -- 160 пикселов
Фоновый цвет #ffedc3 и фоновая картинка pic/az.png,
смещённая вправо и на 1 пиксел вниз (без повторений)
Нулевые внешние и внутренние отступы
Сплошная рамка снизу цвета #638F7B толщиной в 1 пиксел
*/
H1
{
}
/* Картинка в заголовочной части
-----------------------------
Абсолютное позиционирование в (10,10)
*/
H1 IMG
{
}
/* Оболочка для содержания и боковой панели
----------------------------------------
Ширина -- 100%
Плавающий элемент, прилипание слева
Ложная колонка: фоновая картинка pic/bg.png, повторенная
по вертикали справа на расстоянии 60% top
*/
#wrapper
{
}
/* Содержание
----------
Плавающий элемент, прилипание слева
Ширина области содержимого -- 60%
*/
#content
{
float:left;
width:60%;
/* По поводу следующего правила смотрите
статью Владимира Токмакова
"Борьба с прыгающими блоками в IE" на странице:
www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
*/
//margin-right:-100%; /* Заклинание для IE */
}
/* Боковая панель
--------------
Плавающий элемент, прилипание слева
Ширина области содержимого 40%
*/
#sidebar
{
float:left;
width:40%;
/* По поводу следующих правил смотрите
статью Владимира Токмакова
"Борьба с прыгающими блоками в IE" на странице:
www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
*/
//margin-left: 60%; /* Заклинание для IE */
//display: inline; /* Заклинание для IE */
}
/* Отступы для содержимого блоков sidebar и content
------------------------------------------------
Внутренний отступ в 10 пикселов со всех сторон
*/
.wrap
{
}
/* Подвал
------
Прекращение обтекания
Внутренние отступы:
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:0.2em 0;}
P {margin:0.2em 0 1em;}
/* Размеры заголовков
------------------
*/
H2 {font-size:1.4em;}
H3 {font-size:1.2em;}
Файл task02.htm
