Пример разбивки на страницы с использованием CSS

Узнайте, как использовать CSS для создания адаптивной разбивки на страницы.

Простая разбивка на страницы

Если на сайте много страниц, возможно, вы хотите добавить某种 функцию разбивки на страницы на каждой странице:

Пример

❯
  .pagination {
}
.pagination a {
  color: black;
  display: inline-block;
  padding: 8px 16px;
  float: left;
}

Попробуйте сами

text-decoration: none;

Активная наведенная на страницу .active Класс подчеркивает текущую страницу и использует его, когда мышь наводится на них: :hover Выборщик изменяет цвет каждой ссылки на страницу:

Пример

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Попробуйте сами

Закругленные углы активной и наведенной на страницу

Если вам нужны закругленные углы для кнопок "active" и "hover", добавьте border-radius Свойство:

Пример

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Попробуйте сами

Переменный эффект при наведении мыши

Пожалуйста, установите transition Свойство добавляет эффект перехода цвета фона при наведении мыши на страницу:

Пример

.pagination a {
  transition: background-color .3s;
}

Попробуйте сами

Страницы с рамкой

Используйте border Свойство добавляет рамку к страницам:

Пример

.pagination a {
  border: 1px solid #ddd; /* Серый */
}

Попробуйте сами

Закругленные края

Подсказка:Добавьте закругленные края к первым и последним ссылкам на страницу:

Пример

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Попробуйте сами

Пространство между ссылками

Подсказка:Если вы не хотите группировать ссылки на страницы, добавьте margin Свойство:

Пример

.pagination a {
  margin: 0 4px; /* Внешние отступы сверху и снизу равны 0, могут быть легко изменены */
}

Попробуйте сами

Размер страниц

Используйте font-size Свойство изменения размера страниц:

Пример

.pagination a {
  font-size: 22px;
}

Попробуйте сами

Центрированные страницы

Чтобы выровнять страницы по центру, используйте установленный text-align:center Элемент контейнера (например, <div>) окружает его:

Пример

.center {
  text-align: center;
}

Попробуйте сами

Более сложные примеры

Пример

Попробуйте сами

Крошки

Одной из других форм pagination является так называемый "bread crumbs" (крошки):

Пример

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\00a0";
}

Попробуйте сами