CSS Paginierung Beispiel

Lernen Sie, wie Sie mit CSS eine responsive Paginierung erstellen können.

Einfache Paginierung

Wenn auf einer Website viele Seiten vorhanden sind, möchten Sie möglicherweise eine Art von Paginierungsfunktion auf jeder Seite hinzufügen:

Beispiel

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Probieren Sie es selbst aus

Aktive Hover-Paginierung

Verwenden Sie .active Klasse hebt die aktuelle Seite hervor und wird verwendet, wenn der Cursor darauf gehovert wird: :hover Wählen Sie den Farbton für jeden Seitenlink aus:

Beispiel

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Probieren Sie es selbst aus

Aktive und Hover-Paginierung mit Ecken

Fügen Sie hinzu, um runde "active" und "hover" Buttons zu benötigen: border-radius Eigenschaft:

Beispiel

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Probieren Sie es selbst aus

Hover-Effekt

Setzen Sie transition Eigenschaft zur Hinzufügung von Übergangseffekten für die Seitenlinks, um den Übergang beim Cursorüberfahren zu erstellen:

Beispiel

.pagination a {
  transition: background-color .3s;
}

Probieren Sie es selbst aus

Randvolle Paginierung

Verwenden Sie border Eigenschaft zur Hinzufügung von Rändern für die Paginierung:

Beispiel

.pagination a {
  border: 1px solid #ddd; /* Grau */
}

Probieren Sie es selbst aus

Eckenränder

Hinweis:Fügen Sie Eckenränder hinzu, um die ersten und letzten Links der Paginierung zu runden:

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;
}

Probieren Sie es selbst aus

Raum zwischen den Links

Hinweis:Fügen Sie hinzu, um die Seite Links nicht zu kombinieren: margin Eigenschaft:

Beispiel

.pagination a {
  margin: 0 4px; /* Oberer und unterer Außenabstand ist 0, kann flexibel geändert werden */
}

Probieren Sie es selbst aus

Seitengröße

Verwenden Sie font-size Eigenschaftsänderungen für die Seitengröße:

Beispiel

.pagination a {
  font-size: 22px;
}

Probieren Sie es selbst aus

Zentrierte Seiten

Um zentrierte Seiten zu.formatieren, verwenden Sie bitte das Zentrierte Seiten formatting: text-align:center Der Container-Element (wie <div>) umschließt es:

Beispiel

.center {}}
  text-align: center;
}

Probieren Sie es selbst aus

Mehr Beispiele

Beispiel

Probieren Sie es selbst aus

Brotkrümeln

Eine andere Form der Paginierung ist die so genannte "Brotkrümeln" (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";
}

Probieren Sie es selbst aus