Демонстрация: панелей навигации
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель навигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации - это в основном список ссылок, поэтому использование элементов <ul>
и естественно <li>:
<ul>
<li><a href="index.php">Главная</a></li>
<li><a href="news.php">Новости</a></li>
<li><a href="contact.php">Контакты</a></li>
<li><a href="about.php">О Нас</a></li>
</ul>
Попробуйте сами »
Теперь давайте удалим маркеры, поля и отступы из списка:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Попробуйте сами »
Пример объяснение:
list-style-type: none;- Убирает маркеры. В панели навигации не нужны маркеры для списка- Установить
margin: 0;иpadding: 0;чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.