Dowiedz się, jak stworzyć elastyczne paginacji za pomocą CSS.
proste Pagination
Jeśli masz stronę internetową z dużą ilością stron, możesz dodać jakieś paginacji na każdej stronie:
Aby utworzyć paginacji, styl listę HTML:
Przykład
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;
} Spróbuj sam " Aktywne i Hoverable Pagination
Wyróżnij bieżącą stronę z .active klasy i użyć :hover wybieraka, aby zmienić kolor każdego linku do strony, gdy przesunięcie myszy nad nimi:
Przykład
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Spróbuj sam " Zaokrąglone Przyciski Aktywne i Hoverable
Dodaj border-radius nieruchomości, jeżeli chcesz przycisk zaokrągloną "aktywny" i "hover":
Przykład
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Spróbuj sam " Hoverable Efekt przejścia
Dodaj transition własności na strony odwołują się do stworzenia efektu przejścia przy aktywowaniu:
Z ramką Pagination
Użyj border własności, aby dodać obramowanie do paginacji:
zaokrąglone krawędzie
Wskazówka: Dodaj granic zaokrągleniu do linku raz pierwszy i ostatni w paginacji:
Przykład
.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;
}
Spróbuj sam " Odstęp między Linki
Wskazówka: Dodaj margin nieruchomości, jeżeli nie chcesz, aby grupa łączy stronie:
Przykład
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Spróbuj sam " paginacja Rozmiar
Zmień rozmiar paginacji z font-size nieruchomości:
centered Pagination
Aby wyśrodkować paginacji, owinąć element pojemnika wokół niego (jak <div> ), a następnie dodaj text-align:center
Więcej przykładów
Przykład
Spróbuj sam "Bułka tarta
Inną odmianą paginacji jest tak zwane "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";
}
Spróbuj sam "