Позиционирование и z-индекс

Задание 6. Азы информатики

Создайте страницу, вид которой показан на рисунке:

Схема документа показана на рисунке. Логотип и меню выводятся на фоновую полоску при помощи абсолютного позиционирования. Внутри основного содержимого расположен блок “Новости”, который при помощи свойства float:right примыкает к правой границе, а остальные элементы обтекают его слева. В блоке “Автор” использовано свойство clear:right для прекращения обтекания.

Стилевые определения записывайте в отдельный файл с именем task06.css, а HTML-код в файл task06.htm. Файлы сохраняйте в каталоге, который вам укажет учитель.

В этом каталоге есть подкаталог pic, в котором находятся необходимые картинки.

В качестве средств оформления используйте свойства, приведённые в таблице.

Свойство	Описание и значения
position	Задаёт тип позиции блока в окне. Значением является ключевое слово: absolute (блок с абсолютными координатами), relative (блок с относительными координатами), static (действуют обычные правила размещения блока).
left	Расстояние элемента от левого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
top	Расстояние элемента от верхнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
right	Расстояние элемента от правого края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
bottom	Расстояние элемента от нижнего края содержащего его блока. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
z-index	Указывает в каком порядке элементы будут перекрывать друг друга. Элементы с более высоким z-индексом будут располагаться “выше” элементов с более низким.
float	Определяет тип обтекания элемента другими элементами (слева или справа). Значения: none (нет обтекания), left (элемент слева, обтекание справа), right (элемент справа, обтекание слева).
clear	Указывает, что следующие элементы должны быть показаны ниже элемента, выровненного по левому или правому краю. Значения: none (обтеканиt продолжается), left (прекращение обтекания справа), right (прекращение обтекания слева), both (прекращение обтекания со всех сторон).
color	Задаёт цвет текста. Значения: название цвета или его номер (как в соответствующем атрибуте HTML).
background	Значение свойства записывается в виде последовательности параметров: цвет скролл повтор координаты картинка
border	Задаёт рамку вокруг элемента. Записывается в формате: border: толщина стиль цвет, например, border: 1px solid red. Некоторые значения стиля рамки: solid (сплошная линия), dashed (штриховая линия), double (двойная линия).
margin margin-left margin-right margin-top margin-bottom	Определяет размер отступа элемента: со всех сторон (margin) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
padding padding-left padding-right padding-top padding-bottom	Определяет расстояние между содержимым и границей элемента слева со всех сторон (padding) или с только с соответствующей стороны. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.
font-family	Задаёт гарнитуру шрифта. Можно указывать название конкретного шрифта или задавать родовое название: serif (шрифт с засечками), sans-serif (рубленый шрифт), monospace (моноширинный шрифт).
font-size	Задаёт размер шрифта. Значения: мнемонические размерные единицы (xx-small, x-small, small, medium, large, x-large, xx-large), мнемонические относительные указания (smaller, larger), проценты по отношению к текущему размеру (%), любые допустимые абсолютные единицы: pt (пункты), pt (пики), px (пикселы), in (дюймы), cm (сантиметры), mm (миллиметры).
width	Задаёт ширину элемента. Значения: число с допустимой единицей измерения (например, px). Можно записывать значение в виде процента от родительского элемента.

В качестве текстового редактора используйте PSPad или Блокнот. Заготовки можно копировать в текстовый редактор через буфер обмена.

Файл task06.css

  
/* ---------
Белый фон, чёрный текст,
фоновая полоска (картинка fon02.gif), 
отступ блока слева на 100 пикселов 
------------*/
BODY
{
}

/* ---------
Зелёный цвет (#009900)
------------*/
H1,H2,H3,H4,H5,H6
{
}

/* ---------
Заголовок
* Отступ содержимого от границ области в 10 пикселов
* Рамка снизу 
------------*/
.title
{
}
/* ---------
Логотип
* Абсолютное позиционирование (5,5)
------------*/
.logo
{
}
/* ---------
Меню
* Абсолютное позиционирование (10,120)
* Рубленый шрифт
* Размер шрифта уменьшенный на 30%
------------*/
.menu
{
}

/* ---------
Основное содержимое
* Отступ содержимого от границ области в 10 пикселов
------------*/
.contents
{
}
/* ---------
Новости
* Обтекание слева
* Ширина 40% от блока с основным содержимым
* Фон цвета #EAEAEA
* Рамка в 1 пиксел серого цвета 
* Отступ содержимого от границ блока в 10 пикселов
* Отступ блока слева в 10 пикселов
* Рубленый шрифт
* Размер шрифта уменьшенный на 30%
------------*/
.news
{
}

/* ---------
Автор
* Прекращение обтекания
* Отступ содержимого от границ блока в 10 пикселов
* Рамка сверху
* Рубленый шрифт
* Размер шрифта уменьшенный на 30%
*-----------*/
.author
{
}

Файл task06.htm