Создайте страницу, вид которой показан на рисунке:
Документ построен при помощи двух абсолютно позиционированных элементов. Схема документа показана на рисунке:
Стилевые определения записывайте в отдельный файл с именем task05.css, а HTML-код в файл task05.htm. Файлы сохраняйте в каталоге, который вам укажет учитель.
В этом каталоге есть подкаталог pic, в котором находятся необходимые картинки.
В качестве средств оформления используйте свойства, приведённые в таблице.
Свойство | Описание и значения |
---|---|
Задаёт тип позиции блока в окне. Значением является ключевое слово: absolute (блок с абсолютными координатами), relative (блок с относительными координатами), static (действуют обычные правила размещения блока). | |
Расстояние элемента от левого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Расстояние элемента от верхнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Расстояние элемента от правого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Расстояние элемента от нижнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. | |
Указывает в каком порядке элементы будут перекрывать друг друга. Элементы с более высоким z-индексом будут располагаться “выше” элементов с более низким. | |
color | Задаёт цвет текста. Значения: название цвета или его номер (как в соответствующем атрибуте HTML). |
background |
Значение свойства записывается в виде последовательности параметров:
цвет скролл повтор координаты картинка ![]() |
padding-left padding-right padding-top padding-bottom |
Определяет расстояние между содержимым и границей элемента слева со всех сторон (padding) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. |
Задаёт гарнитуру шрифта. Можно указывать название конкретного шрифта или задавать родовое название: serif (шрифт с засечками), sans-serif (рубленый шрифт), monospace (моноширинный шрифт). | |
Задаёт размер шрифта. Значения: мнемонические размерные единицы (xx-small, x-small, small, medium, large, x-large, xx-large), мнемонические относительные указания (smaller, larger), проценты по отношению к текущему размеру (%), любые допустимые абсолютные единицы: pt (пункты), pt (пики), px (пикселы), in (дюймы), cm (сантиметры), mm (миллиметры). | |
Задаёт ширину элемента. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента. |
В качестве текстового редактора используйте PSPad или Блокнот. Заготовки можно копировать в текстовый редактор через буфер обмена.
Файл task05.css
/* --------- Белый фон, чёрный текст ------------*/ BODY { } /* --------- Зелёный цвет (#009900) ------------*/ H1,H2,H3,H4,H5,H6 { } /* --------- Картинка disc.gif в качестве маркера ------------*/ UL LI { } /* --------- Выделение подписи * Курсив * Уменьшенный на 30% размер шрифта * Выравнивание справа ------------*/ P.sign { } /* --------- Зелёный цвет (green), жирное начертание ------------*/ CODE { } /* --------- Колонка слева (врезка) * Абсолютное позиционирование (0,0) * Ширина 250 пикселов * Цвет фона #FFE3CC * Отступ от границ области в 10 пикселов * Рубленый шрифт * Размер шрифта уменьшенный на 30% ------------*/ .block1 { } /* --------- Колонка справа (основное содержимое) * Абсолютное позиционирование (0,270) * Отступ от границ области в 10 пикселов ------------*/ .block2 { }
Файл task05.htm