Навигация
В качестве примера ID-классов мы использовали текстовое горизонтальное меню навигации. Но навигация по сайту может состоять еще и из внутренних ссылок, системы поиска, карты сайта и т.д.
Вот пример вертикального меню в виде списка, состоящего из нескольких пунктов, записанных в столбик. Слева у каждого из разделов меню стоят маркеры. Разделы, у которых есть подразделы, имеют черные кружочки, остальные белые.
Список в HTML обозначается тэгом ul, элементы списка (строчки) - тэгом li. Создаем список для четырех пунктов меню: "HTML", "CSS", "Photoshop" и "Flash".
HTML код выглядит так:
<ul id="menu"><li><a href="имя1.html"> HTML </a></li>
<li><a href="имя2.html"> CSS </a></li>
<li><a href="имя3.html"> Photoshop </a></li>
<li><a href="имя4.html"> Flash </a></li>
</ul>
Задаем правила стиля для ссылок:
- меняем цвет ссылок на зеленый, в результате сокращаем код, ведь теперь не надо для каждой ссылки добавлять атрибут class="menu"#menu a {color: green}
- задаем шрифт для элементов списка и увеличиваем высоту строки в меню
#menu li {font: 14px/1.6 Arial}. - выделяем разделы, у которых нет подразделов свойством list-style-type. Выделяем эти элементы используя селектор по классу empty
li.empty {list-style-type: circle}.
Итоговый HTML-код будет таким:
<html>
<head>
<style type="text/css">
#menu a {
color: green
}
#menu li {
font: 14px/1.6 Arial
}
li.empty {
list-style-type: circle
}
</style>
</head>
<body>
<ul id="menu">
<li class="empty"><a href="имя1.html">HTML</a>
<li><a href="имя2.html">CSS</a>
<li class="empty"><a href="имя3.html">Photoshop</a>
<li><a href ="имя4.html">Flash</a>
</ul>
</body>
</html>
Меню будет выглядеть так:
