Узнать, как создать раздельную навигацию используя HTML, CSS.
Раздельная навигация
Создать раздельную панель навигации
Шаг 1) Добавьте HTML:
<div class="topnav">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
<a href="#about" class="split">Справка</a>
</div>
Шаг 2) Добавьте CSS:
/*
Создание верхней панели навигации с черным фоном*/
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Стилизуем ссылки внутри панели навигации */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Изменение цвета ссылок при наведении */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Создание
выровненной по правому краю (разделенной) ссылки внутри панели навигации */
.topnav
a.split {
float: right;
background-color: #04AA6D;
color: white;
}
Попробуйте сами »
Совет: чтобы создать удобные для мобильных устройств адаптивные панели навигации, прочитайте наш руководство по адаптивной верхней навигации.
Совет: чтобы узнать больше о навигации, перейдите в наш руководство по панели навигации CSS бары.