Przykłady stronicowania CSS
Dowiedz się, jak stworzyć responsywną paginację za pomocą CSS.
Prosta paginacja
Jeśli masz witrynę internetową z wieloma stronami, możesz dodać do każdej strony pewien rodzaj paginacji:
Przykład
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Aktywna i unosząca się paginacja
Podświetl bieżącą stronę za pomocą .active
klasy i użyj :hover
selektora, aby zmienić kolor każdego łącza do strony, przesuwając nad nimi kursor myszy:
Przykład
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Zaokrąglone Aktywne i Hoverable Przyciski
Dodaj border-radiuswłaściwość, jeśli chcesz zaokrąglić przycisk „aktywny” i „najedź”:
Przykład
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Unoszący się efekt przejścia
Dodaj transitionwłaściwość do łączy stron, aby utworzyć efekt przejścia po najechaniu myszą:
Przykład
.pagination a {
transition: background-color .3s;
}
Paginacja obramowana
Użyj borderwłaściwości, aby dodać obramowanie do paginacji:
Przykład
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Zaokrąglone granice
Wskazówka: Dodaj zaokrąglone obramowania do pierwszego i ostatniego łącza w paginacji:
Przykład
.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;
}
Przestrzeń między linkami
Wskazówka: Dodaj marginwłaściwość, jeśli nie chcesz grupować łączy do stron:
Przykład
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Rozmiar paginacji
Zmień rozmiar paginacji z font-sizewłaściwością:
Przykład
.pagination a {
font-size: 22px;
}
Wyśrodkowana paginacja
Aby wyśrodkować paginację, owiń wokół niej element kontenera (np. <div>) za pomocątext-align:center
Przykład
.center {
text-align: center;
}
Więcej przykładów
Przykład
Bułka tarta
Inną odmianą paginacji jest tak zwana „bułka tarta”:
Przykład
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";
}