Стили пагинации CSS
Тема этой страницы — продвинутое оформление пагинации: эффекты наведения, переходы и хлебные крошки.
Пагинация с эффектом наведения
Ссылка страницы может менять цвет фона, когда на неё наводят курсор мыши, благодаря селектору :hover.
Пример
В этой пагинации на наведение реагируют только неактивные ссылки:
Prompt
Создайте панель пагинации со стрелками «назад/вперёд» и номерами страниц 1-5. Оформите активную страницу с синим фоном и белым текстом. Добавьте эффект наведения, который меняет цвет фона на светло-серый для неактивных ссылок.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Hover Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Hover Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Эффект перехода при наведении
Для плавной анимации при наведении задайте ссылкам страниц свойство transition.
Пример
При наведении цвет фона теперь меняется постепенно благодаря эффекту перехода:
Prompt
Создайте панель пагинации со стрелками «назад/вперёд» и номерами страниц 1-5. Оформите ссылки с рамкой, border-radius и отступами. Добавьте CSS-переход, чтобы изменение цвета фона при наведении плавно анимировалось в течение 1 секунды.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Transition Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Transition Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Пагинация в виде хлебных крошек
Хлебные крошки — ещё один вид пагинации. Они показывают путь к текущей странице в виде ссылок с символом вроде «/» между ними.
Пример
Между элементами этой навигации в виде хлебных крошек стоят разделители:
Prompt
Создайте навигацию в виде хлебных крошек с четырьмя элементами: Главная, Фото, Лето 25 и Италия. Оформите её со светло-серым фоном, без маркеров списка, встроенными элементами, зелёным цветом ссылок и разделителем «/» между элементами с помощью свойства CSS content.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb Pagination</title>
<style>
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li a {
color: green;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 25</a></li>
<li>Italy</li>
</ul>
</body>
</html>