Пагинация CSS
В этом уроке мы создаём адаптивную пагинацию с помощью CSS.
Сайту с большим количеством страниц может быть полезна пагинация на каждой из них.
Обычная разметка — это маркированный список (<ul>) с серией ссылок: по одной ссылке на каждый номер страницы, а также элементы управления «назад» и «вперёд».
Пример
Простой вариант:
Prompt
Создайте простую пагинацию, используя маркированный список с CSS flexbox. Включите элементы управления «назад» (««») и «вперёд» («»») и номера страниц 1-5. Оформите с центрированным макетом, без маркеров списка, ссылками с рамкой и скруглёнными углами, и отступами.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Pagination</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">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>
Объяснение примера
За расположение отвечают три объявления в контейнере пагинации:
display: flex;размещает номера страниц в горизонтальный рядjustify-content: center;центрирует этот рядlist-style: none;убирает маркеры списка
Внешний вид номеров страниц задаёт элемент <a> внутри каждого <li>, оформленный с помощью таких свойств, как display, padding, text-decoration, border, color и border-radius.
Пагинация с классом Active
Класс .active отмечает текущую страницу, чтобы пользователи понимали, где находятся.
Пример
Тот же список, теперь с классом .active:
Prompt
Создайте пагинацию с элементами управления «назад/вперёд» и номерами страниц 1-5. Добавьте класс .active к одной ссылке страницы с зелёным (#4CAF50) фоном и белым текстом, чтобы выделить текущую страницу. Включите базовые стили пагинации (flex, по центру, без маркеров списка, ссылки с рамкой и скруглёнными углами).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination With Active Class</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Pagination With Active Class</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>
Пагинация с классом Disabled
На последней странице кнопка «Вперёд» не должна работать.
С этим справляется класс .disabled: его настройки color, cursor и pointer-events делают кнопку «Вперёд» некликабельной.
Пример
Снова список, теперь с классом .disabled:
Prompt
Создайте пагинацию с элементами управления «назад/вперёд» и номерами страниц 1-5. Добавьте класс .disabled к ссылке «вперёд» с серым цветом (#dddddd), cursor not-allowed и pointer-events none, чтобы сделать её некликабельной. Включите базовые стили пагинации и класс .active на одной ссылке страницы.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination With Disabled Class</title>
<style>
.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
.pagination li a.disabled {
color: #dddddd;
cursor: not-allowed;
pointer-events: none;
}
</style>
</head>
<body>
<h2>Pagination With Disabled Class</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" class="active">5</a></li>
<li><a href="#" class="disabled">»</a></li>
</ul>
</body>
</html>