Пагинация - Постраничная навигация

Здесь вы узнаете, как сделать пагинацию или постраничную навигацию при помощи CSS.

Как сделать пагинацию

Если у вас сайт, состоящий из нескольких страниц, то вы можете сделать постраничную навигацию или пагинацию:

Шаг 1) Добавляем HTML:

Пример


<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

Шаг 2) Добавляем CSS:

Пример


/* Ссылки пагинации */
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

/* Стили активной/текущей ссылки */
.pagination a.active {
  background-color: dodgerblue;
  color: white;
}

/* Добавляем серый фон при наведении мыши */
.pagination a:hover:not(.active) {
  background-color: #ddd;
}

Попробовать самому »

Активная и наведенная ссылка с круглыми краями

Если вы хотите, чтобы активная и наведенная ссылка имели скругленные края, добавьте свойство 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 li:first-child a {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

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

Попробовать самому »

Отступы между ссылками пагинации

Добавьте свойство margin, если вы не хотите, чтобы ссылки пагинации не были прижаты друг к другу:

Пример


.pagination a {
  margin: 0 4px; /* 0 - сверху и снизу. Можно выставить любые значения */
}

Попробовать самому »

Размер пагинации

При помощи свойства font-size можно менять размер пагинации:

Пример


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

Попробовать самому »

Размещение пагинации по центру

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

Пример


.center {
  text-align: center;
}

Попробовать самому »

Контактные ярлыки

Хлебные крошки на CSS