Реферат: Блоки в документах

Дублирующая навигация обычно употребляется на больших сайтах. Она располагается внизу страницы и представляет собой дублирование ссылок на самые важные разделы сайта. Типичное дублирующее меню выглядит так, как показано на рис. 17

Рис. 17 Дублирующее меню

Реализуется оно очень просто. Единственная особенность в том, что иногда ссылки в дублирующем меню отличаются от обычных ссылок. Реализовать такое отличие проще всего с помощью контекстного селектора. Например, следующим образом:

#double_menu A {color: #999; font-size: 11px}

. . .

<div id=”double_menu”>

<a href=””>О компании</a> | <a href=””>Партнеры</a> | <a href=””>Решения</a> | <a href=””>Продукты</a> | <a href=””>Цены</a> | <a href=””>Контакты</a>

</div>

Карта сайта

Карта сайта представляет собой развернутое дерево разделов сайта. Обычно оно реализуется с помощью вложенных ненумерованных списков.

<ul>

<ul>

<li><a href="">Надувные матрешки</a></li>

<li><a href="">Электробалалайки</a></li>

</ul>

</li>

<li><a href="">Контакты</a></li>

</ul>

Конечно, если у сайта всего пять разделов, то карта сайта и не нужна вовсе, но в данном случае нет смысла приводить полную карту сайта из сотни разделов. Без стилей такая карта смотрится достаточно тривиально, как видно на рис. 18

Рис. 18 Карта очень маленького сайта без дополнительного оформления

Давайте сделаем карту более эстетичной. Для начала надо задать шрифт для элементов UL:

UL {font: 11px/1.6 Verdana}

Для того, чтобы различать карту сайта и обычные списки в тексте, надо присвоить ей уникальный идентификатор, то есть id. Например, назовем нашу карту sitemap. Зададим цвет ссылок в карте. Конечно же, будем использовать контекстный селектор:

UL#sitemapA {color: #666}

Теперь можно заняться маркерами. По умолчанию у списка первого уровня маркерами являются закрашенные кружочки, а у списка второго уровня – незакрашенные, что видно на рис. 18. Давайте для элементов списка первого уровня в карте сайта зададим в качестве маркера квадратик, а для элементов списка второго уровня нарисуем свою картинку, например, маленькую стрелочку.

Для задания типа маркера есть свойство list-style-type. Его и применим:

UL#sitemap {color: #666; list-style-type: square}