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 / Хлібні крихти
Ще один варіант пагінації - так званий "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";
}
Спробуйте самі »
