 |
Резиновый двухколоночный макет
|
|
|
|
Резиновый двухколоночный макет
|
container | ||
|
nav Навигация |
content | |
Действуем аналогично описанному выше способу формирования колонок с использованием плавающего размещения, но значения свойств width и margin-left задаем в процентах.
| body {margin: 0; }#container { min-width: 800px; max-width: 1200px; margin: auto; }#nav { float: left; width: 20%; }#content { margin-left: 20%; } |
Свойство min-width для блока container устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width, наоборот, задаёт максимальную ширину, которая не будет превышена.
Откройте Пример 4, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Три столбца с шапкой и нижним колонтитулом
|
header Шапка | ||
| nav Боковая панель | content Содержимое | sidebar Боковая панель |
|
footer Подвал | ||
В данном макете используется плавающее размещение.
Откройте Пример 5, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Обратите внимание, что свойство float для всех столбцов установлено в значение left, а сами столбцы размещаются друг за другом по горизонтали. Для элемента div с ID-селектором #footer используется свойство clear со значением both. Это гарантирует, что нижний колонтитул полностью очистит столбцы с плавающим размещением.
Для колонок можно указать фиксированную ширину или плавающую (использовать значения, выраженные в процентах).
Задание
- Для страниц по направлениям отдыха задайте фиксированный макет, панель навигации должна располагаться справа.
- Для страницы " Туристическая фирма" задайте макет, состоящий из трех столбцов с шапкой и подвалом.
|
|
|
Управление видом отображения элемента
Атрибут media
Атрибут media устанавливает тип устройства вывода, для которого предназначена таблица стилей, может принимать следующие значения:
| all | Все устройства. |
| handheld | Смартфоны, устройства с малой шириной экрана. |
| Печатающее устройство (например, принтер). | |
| screen | Экран монитора. Значение принимается по умолчанию. |
| projection | Проектор |
| tv | Телевизор |
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
| < link rel=" stylesheet" type=" text/css" media=" screen" href=" style1. css" > < link rel=" stylesheet" type=" text/css" media=" print" href=" style2. css" > |
| < style type=" text/css" media=" screen, tv" > ... < /style> < style type=" text/css" media=" print" > ... < /style> |
Чтобы организовать печать web-страницы, следует разместить ссылку вида:
| < a href=" javascript: window. print(); void 0; " > < img src=" адрес_изображения" > < /a> |
Задание
- Создайте две дополнительные таблицы стилей: одна должна применяться при выводе страницы через проектор, вторая — при печати. Так как при выводе web-страницы на печать важна содержательная часть, то добейтесь того, чтобы в распечатанном виде документ представлял собой черный текст на белом фоне на всю ширину страницы без лишних блоков (уберите фоновые картинки, используя свойство display, скройте панель навигации и т. д. ). В стиле, применяемом при выводе документа через проектор, увеличьте размер шрифта.
Проанализируйте код. Дополнив его свойствами overflow, z-index, float, добейтесь нужного эффекта (в зависимости от размеров изображений измените значения свойств top/left, width/height).
| a{width: 100px; height: 100px; position: relative; }a img{position: absolute; top: -20px; left: -20px; }a: hover{} |
- Создайте всплывающую подсказку, не используя атрибут title. Параметры форматирования определите самостоятельно. Всплывающая подсказка должна появляться при наведении указателя мыши на текст, при этом должен изменяться внешний вид указателя мыши.
| CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. |
|
|
|
Выпадающие меню
Создание выпадающего меню начинается с определения его структуры на основе многоуровневого списка.
| < DIV id=" nav" > < UL> < LI> < A href=" #" > Ссылка1< /A> < /LI> < LI> < A href=" #" > Ссылка2< /A> < UL> < LI> < A href=" #" > Ссылка21< /A> < /LI> < LI> < A href=" #" > Ссылка22< /A> < /LI> < LI> < A href=" #" > Ссылка23< /A> < /LI> < /UL> < /LI> < LI> < A href=" #" > Ссылка3< /A> < UL> < LI> < A href=" #" > Ссылка31< /A> < /LI> < LI> < A href=" #" > Ссылка32< /A> < /LI> < /UL> < /LI> < /UL> < /DIV> |
Далее следует убрать маркеры в списке, отступы, задать ширину меню.
| #nav ul{ margin: 0; padding: 0; list-style: none; width: 200px; } |
Чтобы относительно основного меню абсолютно позиционировать подменю, зададим для основного меню значение relative свойства position, а для подменю — absolute. Используя свойства left и top, укажем положение подменю относительно родительского пункта меню. Чтобы подменю не отображалось при открытии документа, определим свойство display со значением none.
| #nav ul li{ position: relative; border-bottom: 1px solid #fff; } #nav li ul{ position: absolute; left: 200px; top: 0; display: none; } |
Для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим свойству display значение block.
| #nav ul li a{ text-decoration: none; color: #900; background: #CCC; padding: 5px; display: block; } |
Организуем появление подменю при наведении указателя мыши на элемент основного меню.
| #nav li: hover ul {display: block; } |
|
|
|
