CSS панель навигации
Панель навигации
Умелое использование навигации для любого веб-сайта очень важно.
С помощью CSS вы можете преобразовать в хорошую панель навигации вместо скучных HTML меню.
Навигационные ссылки список =
В качестве стандартной панели навигации на основе HTML является обязательным
, В нашем примере мы создадим стандартный список HTML панель навигации.
Панель навигации в основном список ссылок, так что используйте <UL> и <li> элементы являются очень значимым:
примеров
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Попробуйте »
Теперь давайте удалим поля и отступы из списка:
Примеры анализа:
- Список стиле типа: нет - перед удалением списка маленьких флагов. Панель навигации не нужен список маркеров
- Удалить настройки по умолчанию Поля и отступы набор браузера 0
Приведенный выше пример кода в стандартной вертикальной и горизонтальной навигации штрих-кодов, используемых.
Вертикальная панель навигации
Приведенный выше код, нам нужно только <a> элементы стиля, создания вертикальной панели навигации:
Пример показывает:
- дисплей: блок - блок отображения ссылок элемент, так что полнота становится интерактивными область ссылки (а не только текст), что позволяет определять ширину
- ширина: 60px - блочные элементы по умолчанию это максимальная ширина. Мы хотим указать ширину 60 пикселей
Совет: См пример полностью стиле вертикальной панели навигации .
Примечание: Не забудьте указать ширину элемента в вертикальной чертой <a> навигации 'с.Если опустить ширину, IE6 может привести к неожиданным результатам.
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающихэлементов списка.
Оба метода хороши, но если вы хотите сделать ссылку на тот же размер, вы должны использовать плавающий метод.
Встроенные элементы списка
Один построить горизонтальную панель навигации, чтобы указать
Примеры анализа:
- Дисплей: встроенный; - По умолчанию <li> элемент представляет собой блок-элемент. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить строку.
Совет: См пример полностью стиля горизонтальной панели навигации .
Плавающие элементы списка
В приведенном выше примере ссылки имеют различную ширину.
Для всех звеньев одинаковой ширины, всплывают <li> элемент и указать ширину элемента <a>:
Примеры анализа:
- плавать: слева - использовать слайды слайдер элемента рядом друг с другом
- дисплей: блок - блок отображения ссылок элемент, так что полнота становится интерактивными область ссылки (а не только текст), что позволяет определять ширину
- ширина: 60px - блочные элементы по умолчанию это максимальная ширина. Мы хотим указать ширину 60 пикселей
Совет: См пример полного стиля горизонтальной панели навигации. .