Узнайть, как создать отзывчивую пагинацию с помощью CSS3.
Простая пагинация
Если у вас есть веб сайт с большим количеством страниц, вы можете добавить своего рода нумерация страниц на каждой странице:
.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 ссылки на страницу для создания эффекта перехода при наведении:
.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;
}
Попробуйте сами »
Пагинация по центру
Чтобы центрировать пагинацию, оберните элемент контейнера (например, <div>)
вокруг него text-align:center
.center {
text-align: center;
}
Попробуйте сами »
Еще примеры
Пагинация крошки
Еще один вариант разбиения на страницы-это так называемые "крошки":
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";
}
Попробуйте сами »