Примеры разбивки на страницы 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свойство к ссылкам на страницы, чтобы создать эффект перехода при наведении:
Пример
.pagination a {
transition: background-color .3s;
}
Разбивка на страницы с рамкой
Используйте borderсвойство, чтобы добавить границы к разбивке на страницы:
Пример
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Закругленные границы
Совет: добавьте закругленные границы к первой и последней ссылке в пагинации:
Пример
.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 is for top
and bottom. Feel free to change it */
}
Размер страницы
Измените размер страницы с помощью 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";
}