Панель навигации состоит из графического изображения, помещенного в ряд ячеек таблицы. Поскольку использование таблиц для поиска любого содержимого страниц, не являющегося таблицами, больше не рекомендуется, многие люди, создающие Интернет, ищут (новые) способы использования структурированных страниц.
Разметка XHTML и форматирование CSS для создания панелей навигации.
Простая панель навигации CSS.
Возможно, самое простое решение для создания текстовой панели навигации в стиле CSS — разместить все ссылки в одной строке текста, как в примере А.
Такой подход кажется разумным и интуитивно понятным. Но проблема в том, что размещение всех ссылок в одной строке текста затрудняет контроль пробелов между ссылками, а также до и после них. Итак, чтобы избежать скопления всех ваших ссылок, вам лучше
После этого вам обычно приходится вставлять в качестве разделителей трубы (вертикальные полосы) и символы пробелов, не являющиеся символами новой строки.
Как показывает приведенный ниже код, результат вряд ли будет той четкой и структурированной разметкой, которую мы хотим.
| Ниже приводится цитируемое содержание: <div id="navbar1"> <a href="link1a.html">Кнопка 1</a> <a href="link2a.html ">Кнопка 2</a> | <a href="link3a.html "> Кнопка 3</a> </div> |
Панель навигации CSS на основе списка Другой способ создать панель навигации CSS — использовать теги <ul> и <li> для представления ссылок в виде неупорядоченного списка.
На первый взгляд использование неупорядоченного списка для панели навигации кажется нелогичным, потому что мы привыкли думать о неупорядоченном списке как о списке элементов, выдвинутых вертикально вверх, с маркером перед каждым из них. Кажется, это несовместимо с горизонтальной ориентацией панели навигации.
Однако логическая структура списка как набора независимых элементов списка может быть применена к ссылкам на панели навигации, а правила CSS позволяют принудительно переопределить представление элементов списка по умолчанию, исключить маркеры и вместо этого упорядочить элементы списка на странице; поплавка ниже.
Зная это, давайте теперь рассмотрим пример Б, создающий панель навигации в стиле CSS и XHTML на основе неупорядоченного списка.
Вот разметка XHTML:
| Ниже приводится цитируемое содержание: <div id="navbar2"> |
Вот код CSS для преобразования списка текстовых ссылок в панель навигации:
| Ниже приводится цитируемое содержание: div#navbar2 { |