CSS Пагинация. Примеры нумерации страниц
Узнайте, как создать адаптивную нумерацию страниц с помощью CSS.
Простая нумерация страниц
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то нумерацию страниц на каждую страницу:
Пример
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Попробуйте сами »
Активная и при наведении курсора нумерация страниц
Выделите текущую страницу с помощью класса .active и используйте селектор :hover для изменения цвета каждой ссылки на страницу при наведении на них указателя мыши:
Пример
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Попробуйте сами »
Округлые активные и при наведении курсора кнопки
Добавьте свойство border-radius, если хотите, чтобы кнопки "активная" и "при наведении" были округлыми:
Пример
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Попробуйте сами »
Эффект перехода при наведении
Добавьте свойство transition к ссылкам на странице, чтобы создать эффект перехода при наведении:
Границы нумерации страниц
Используйте свойство border чтобы добавить границы к нумерации страниц:
Округлые границы
Совет: Добавьте округлые границы к первой и последней ссылке в нумерации страниц:
Пример
.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 если вы не хотите группировать ссылки на страницы:
Размер пагинации
Измените размер нумерации страниц с помощью свойства font-size:
Центрирование пагинации
Чтобы центрировать нумерацию страниц, оберните вокруг него элемент контейнера (например <div>) с помощью text-align:center
Больше примеров
Хлебные крошки
Еще один вариант пагинации так называемый "breadcrumbs" - "хлебные крошки":
Пример
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";
}
Попробуйте сами »
