Как сделать - Хлебные крошки
Узнать, как создать навигацию по хлебным крошкам с помощью CSS.
Хлебные крошки
Навигация с помощью хлебной крошки предоставляет ссылки на каждую предыдущую страницу, по которой пользователь перешел, и показывает текущее местоположение пользователя на веб-сайте.
Создать хлебные крошки
Шаг 1) Добавить HTML:
Пример
<ul class="breadcrumb">
<li><a href="#">Главная</a></li>
<li><a href="#">Картины</a></li>
<li><a href="#">Лето 15</a></li>
<li>Италия</li>
</ul>
Шаг 2) Добавить CSS:
Пример
/* Стиль списка */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}
/* Отображение элементов списка бок о бок */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Добавить символ косой черты (/) перед/за каждым элементом списка */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Добавить цвет для всех ссылок внутри списка */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Добавить цвет на наведении курсора мыши */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
Редактор кода »Зайдите на наш учебник CSS Пагинация, чтобы узнать больше о пагинации.