Узнайте, как создать отзывчивый разбиение на страницы с помощью CSS.
Простой Pagination
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то пагинацией к каждой странице:
Для того, чтобы создать разбиение на страницы, стиль списка HTML:
пример
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} Попробуй сам " Активный и Hoverable Pagination
Выделите текущую страницу с .active класса, а также использовать :hover селектор , чтобы изменить цвет каждой ссылки страницы при перемещении мыши над ними:
пример
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Попробуй сам " Округлые Активные и Hoverable Кнопки
Добавьте border-radius свойства , если вы хотите и кнопки округленный "активный" "парения":
пример
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Попробуй сам " Hoverable Эффект перехода
Добавьте transition собственности к ссылкам страницы , чтобы создать эффект перехода на парении:
Граничит Pagination
Используйте border собственности , чтобы добавить границы к пагинацией:
Округлые границы
Совет: Добавьте закругленные границы для вашей первой и последней ссылке в пагинацией:
пример
.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 свойство , если вы не хотите , чтобы группа ссылок страницы:
пример
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Попробуй сам " Разбивка Размер
Изменение размера пагинацией с font-size собственности:
Сосредоточенный Pagination
Для размещения разбиения на страницы, обернуть контейнер элемента вокруг него (например , <div> ), и добавьте 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";
}
Попробуй сам "