Beispiele für CSS -Paginierung
Erfahren Sie, wie Sie mit CSS eine responsive Paginierung erstellen.
Einfache Paginierung
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht jeder Seite eine Art Paginierung hinzufügen:
Beispiel
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Aktive und schwebende Paginierung
Markieren Sie die aktuelle Seite mit einer .active
Klasse und verwenden Sie den :hover
Selektor, um die Farbe jedes Seitenlinks zu ändern, wenn Sie die Maus darüber bewegen:
Beispiel
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Abgerundete aktive und schwebende Schaltflächen
Fügen Sie die border-radiusEigenschaft hinzu, wenn Sie eine abgerundete "Aktiv"- und "Hover"-Schaltfläche wünschen:
Beispiel
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Hoverbarer Übergangseffekt
Fügen Sie die transitionEigenschaft zu den Seitenlinks hinzu, um beim Hover einen Übergangseffekt zu erzeugen:
Beispiel
.pagination a {
transition: background-color .3s;
}
Umrandete Paginierung
Verwenden Sie die borderEigenschaft, um der Paginierung Rahmen hinzuzufügen:
Beispiel
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Abgerundete Ränder
Tipp: Fügen Sie Ihrem ersten und letzten Link in der Paginierung abgerundete Rahmen hinzu:
Beispiel
.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;
}
Abstand zwischen Links
Tipp: Fügen Sie die marginEigenschaft hinzu, wenn Sie die Seitenlinks nicht gruppieren möchten:
Beispiel
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Paginierungsgröße
Ändern Sie die Größe der Paginierung mit der font-sizeEigenschaft:
Beispiel
.pagination a {
font-size: 22px;
}
Zentrierte Paginierung
Um die Paginierung zu zentrieren, wickeln Sie sie mit einem Containerelement (wie <div>) um text-align:center
Beispiel
.center {
text-align: center;
}
Mehr Beispiele
Beispiel
Semmelbrösel
Eine weitere Variante der Paginierung sind sogenannte „Breadcrumbs“:
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";
}