CSS-Paginierungsbeispiele
In diesem Abschnitt stellen wir Beispiele vor, wie man mit CSS eine Paginierung erstellt.
Einfache Paginierung
Wenn Ihre Website viele Seiten hat, müssen Sie die Paginierung verwenden, um für jede Seite eine Navigation bereitzustellen.
Die folgenden Beispiele zeigen, wie Sie HTML und CSS verwenden, um eine Paginierung zu erstellen:
CSS-Beispiele
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;
}
Selbst ausprobieren »
Klick- und Hover-Stile für die Paginierung
Wenn Sie auf die aktuelle Seite klicken, können Sie.activeUm den Stil der aktuellen Seite festzulegen, können Sie Maus-Hover verwenden.:hoverden Selektor, um den Stil zu ändern:
CSS-Beispiele
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Selbst ausprobieren »
CSS-Beispiele
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Selbst ausprobieren »
Stil mit abgerundeten Ecken
Sie könnenborder-radiusAttribut, um der ausgewählten Seitenzahl einen Stil mit abgerundeten Ecken hinzuzufügen:
CSS-Beispiele
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Selbst ausprobieren »
Hover-Übergangseffekt
Wir können hinzufügentransitionAttribut, um einen Übergangseffekt hinzuzufügen, wenn der Mauszeiger über die Seitenzahl fährt:
Paginierung mit Rahmen
Wir können verwendenborderdas Attribut, um eine Paginierung mit Rahmen hinzuzufügen:
Abgerundeter Rahmen
Tipp:Fügen Sie abgerundete Ecken zum ersten Paginierungslink und zum letzten Paginierungslink hinzu:
CSS-Beispiele
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;
}
Selbst ausprobieren »
Paginierungsabstand
Tipp:Du kannstmargindas Attribut verwenden, um direkt Abstände zwischen jeder Seitennummer hinzuzufügen:
CSS-Beispiele
margin: 0 4px; /* 0 entspricht oben und unten, du kannst es ändern, um den Effekt zu sehen */
}
Selbst ausprobieren »
Schriftgröße der Paginierung
Wir können verwendenfont-sizedas Attribut, um die Schriftgröße der Paginierung festzulegen:
Zentrierte Paginierung
Wenn du die Paginierung zentrieren möchtest, kannst du sie dem Containerelement (wie <div>) mit dem Stiltext-align:centerhinzufügen:
Weitere Beispiele
Breadcrumb-Navigation
Eine weitere Art der Navigation ist die Breadcrumb-Navigation, wie im folgenden Beispiel gezeigt:
CSS-Beispiele
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";
}
Selbst ausprobieren »