Deutsch

CSS Tutorial

CSS3 Tutorial

CSS Advanced

CSS References

CSS Responsive

CSS - Paginierung: Ein Anfängerguide

Hallo da draußen, zukünftige Webdesign-Superstars! Heute tauchen wir ein in die wunderbare Welt der CSS-Paginierung. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide auf dieser aufregenden Reise sein. Am Ende dieses Tutorials wirst du beautiful, funktionale Paginierung wie ein Profi erstellen können!

CSS - Pagination

Was ist Paginierung?

Bevor wir loslegen, sprechen wir darüber, was Paginierung eigentlich ist. Stell dir vor, du liest ein Buch. Anstatt den gesamten Text auf einer endlosen Seite zu quetschen, ist er in handhabbare Stücke aufgeteilt – das ist Paginierung in der physischen Welt. Auf Websites hilft Paginierung lange Listen von Inhalten (wie Suchergebnisse oder Blog-Beiträge) in separate Seiten zu unterteilen. Es ist wie给你的用户一个虚拟的"翻页"按钮！

Nun, rollen wir die Ärmel hoch und los geht's!

Schritt 1: Hinzufügen von HTML-Markup

Zuerst einmal müssen wir die grundlegende Struktur unserer Paginierung erstellen. Denk daran als den Aufbau des Skeletts unseres Designs.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

In diesem Beispiel erstellen wir ein <div> mit der Klasse "pagination". Darinnen haben wir mehrere <a>-Tags (Links), die unsere Seitenzahlen darstellen. Die &laquo; und &raquo; sind spezielle Zeichen für links und rechts Pfeile – stylish, oder?

Schritt 2: Definieren von CSS-Klassen

Nun, da wir unser Skelett haben, lassen Sie uns ein wenig Stil hinzufügen! Wir beginnen mit ein wenig grundlegendem CSS, um unserer Paginierung eine Form zu geben.

.pagination {
display: inline-block;
}

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

Das macht Folgendes:

  • display: inline-block; macht unseren Paginierungscontainer wie ein inline-Element verhalten, aber ermöglicht es uns, Breite und Höhe festzulegen.
  • Wir stylen alle <a>-Tags innen in unserem Paginierungsdiv.
  • float: left; unsere Links horizontal anordnen.
  • padding gibt etwas Platz um unseren Text.
  • text-decoration: none; entfernt die Unterstreichung unserer Links.

Schritt 3: Stil für Paginierungslinks

Lassen Sie uns unsere Paginierungslinks ein wenig interessanter aussehen lassen!

.pagination a.active {
background-color: #4CAF50;
color: white;
}

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

Dieser Code macht zwei coole Dinge:

  1. Er stylt die "aktive" Seite (die aktuelle Seite) mit einem grünen Hintergrund und weißem Text.
  2. Er fügt einen Hover-Effekt zu allen anderen Links hinzu, ändert ihre Hintergrundfarbe, wenn du mit der Maus darüber fährst.

CSS einfache Paginierung

Glückwunsch! Du hast gerade eine einfache, funktionale Paginierung erstellt. Aber warum hier aufhören? Lassen Sie uns einige aufregendere Variationen erkunden!

CSS aktive und Hoverbare Paginierung

Möchtest du deine Paginierung interaktiver machen? Probiere das aus:

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

.pagination a.active {
background-color: #4CAF50;
color: white;
}

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

Das transition-Attribut fügt einen flüssigen Farbwechselseffekt hinzu, wenn man über die Links fährt. Es ist wie Magie!

CSS abgerundete aktive und Hoverbare Buttons

Gestalten wir unsere Buttons mit Kurven:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius rundet die Ecken unserer Buttons ab, während margin etwas Platz zwischen ihnen hinzufügt. Sieht das nicht schick aus?

CSS Hoverbarer Übergangseffekt

Möchtest du ein bisschen Glanz hinzufügen? Probiere diesen subtilen Skaleneffekt aus:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Jetzt werden deine Links leicht wachsen, wenn man darüber fährt. Es ist, als ob sie zum Klicken herausreichen!

CSS gerahmte Paginierung

Lassen Sie uns einige Ränder hinzufügen, um unsere Paginierung hervorzuheben:

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

Diese einfache Linie fügt einen leichten grauen Rand um jeden Link hinzu. Es ist erstaunlich, wie eine kleine Änderung einen so großen Unterschied machen kann!

CSS abgerundete Ränder

Möchtest du diese Ränder weicher machen? Lassen Sie uns sie abrunden:

.pagination a {
border-radius: 50%;
}

Das verwandelt unsere quadratischen Buttons in perfekte Kreise. Wie cool ist das?

CSS Platz zwischen Links

Manchmal brauchen wir ein bisschen mehr Platz:

.pagination a {
margin: 0 4px;
}

Dies fügt einen kleinen Abstand zwischen jedem Link hinzu, gibt deiner Paginierung ein luftigeres Gefühl.

CSS Paginierungsgröße

Eine Größe passt nicht für alles. Lernen wir, wie man die Größe anpasst:

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

Experimentiere mit diesen Werten, um die perfekte Größe für dein Design zu finden!

CSS zentrierte Paginierung

Möchtest du deine Paginierung schön in der Mitte der Seite platzieren?

.pagination {
text-align: center;
}

Diese einfache Zeile zentriert deinen gesamten Paginierungsblock. Magie!

CSS Paginierung mit Vorher/Nachher-Buttons

Lassen Sie uns einige Navigationsbuttons hinzufügen:

<div class="pagination">
<a href="#">&laquo; Zurück</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Weiter &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Dies fügt "Zurück" und "Weiter" Buttons hinzu und stylt sie unterschiedlich.

CSS Paginierung mit Brotkrumen

Möchtest du den Benutzern zeigen, wo sie in deiner Seitenabfolge sind? Probiere das aus:

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Seite 2 von 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

Dies fügt einen Textindikator hinzu, der die aktuelle Seite und die Gesamtseitenanzahl anzeigt.

CSS Paginierung mit Liste

Schließlich probieren wir eine listenbasierte Paginierung aus:

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Dies erstellt eine saubere, listenbasierte Paginierungsanordnung.

Und das war's, Leute! Du hast gerade die Ins und Outs der CSS-Paginierung gelernt. Denke daran, der Schlüssel zum Beherrschen dieser Techniken ist die Übung. Also experimentiere mit diesen Stilen, mische und kombiniere sie und erstelle deine eigenen einzigartigen Paginierungsdesigns. Wer weiß? Vielleicht erstellst du das nächste große Ding im Webdesign!

Frohes Coden und möge deine Seiten immer perfekt paginiert sein!

Credits: Image by storyset

Vorheriges Tutorial:
CSS - Buttons
Nächstes Tutorial:
CSS - Variablen