Erfahren Sie, wie eine ansprechende Paginierung mit CSS zu erstellen.
Einfache Paginierung
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht eine Art von Paginierung jeder Seite hinzuzufügen:
Um eine Paginierung, Stil eine HTML-Liste zu erstellen:
Beispiel
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;
} Versuch es selber " Aktive und Hoverable Paginierung
Markieren Sie die aktuelle Seite mit einem .active Klasse, und verwenden Sie den :hover Wähler die Farbe jeder Seite Link zu ändern , wenn die Maus über sie bewegen:
Beispiel
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Versuch es selber " Abgerundete Aktive und Hoverable Buttons
Fügen Sie die border-radius Eigenschaft , wenn Sie eine abgerundete "aktiv" und "schweben" -Taste wollen:
Beispiel
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Versuch es selber " Hoverable Übergangseffekt
Fügen Sie den transition Eigenschaft auf die Seite Links einen Übergangseffekt auf schweben zu erstellen:
angrenzende Paginierung
Verwenden Sie die border Eigenschaft hinzufügen Grenzen der Paginierung:
Abgerundete Borders
Tipp: Fügen Sie abgerundete Ränder auf Ihre erste und letzte Glied in der Paginierung:
Beispiel
.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;
}
Versuch es selber " Space Between Verbindungen
Tipp: Fügen Sie die margin Eigenschaft , wenn Sie die Seite Links zu Gruppe nicht wollen:
Beispiel
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Versuch es selber " Paginierung Größe
Ändern Sie die Größe der Paginierung mit der font-size Eigenschaft:
zentriert Paginierung
Um die Paginierung zu zentrieren, wickeln Sie ein Containerelement um ihn herum (wie <div> ), und fügen Sie text-align:center
Mehr Beispiele
Beispiel
Versuch es selber "Semmelbrösel
Eine weitere Variante der Paginierung ist die sogenannte "Brotkrumen":
Beispiel
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";
}
Versuch es selber "