Здесь вы узнаете, как сделать пагинацию или постраничную навигацию при помощи CSS.
Как сделать пагинацию
Если у вас сайт, состоящий из нескольких страниц, то вы можете сделать постраничную навигацию или пагинацию:
Шаг 1) Добавляем HTML:
<div class="pagination">
<a href="#">«</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="#">»</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;
}