Die Paginierung der Website ist ein entscheidender Aspekt für jedes Layout mit sich wiederholendem Inhalt. Blogs sind häufig eine Überlegung, aber auch Portfolio-Listen oder verwandte Nachrichten- / Feed-Links oder andere Arten von Archiv. Durch die Organisation eines Blogposts auf vielen Seiten kann die Lesezeit reduziert werden - insbesondere bei besonders ausführlichen Artikeln.
In diesem Tutorial möchte ich eine Sammlung von CSS-Techniken zum Entwerfen von Paginierung demonstrieren. Wenn Sie diese Designs mit Inhaltssystemen wie WordPress kombinieren, können Sie sehen, wie die Schnittstellen wirklich funktionieren. Um einen Eindruck vom Endprodukt zu bekommen, werfen Sie einen Blick auf meine Live-Demo-Demo.
Live Demo - Quellcode herunterladen
Fertig machen
In diesem Lernprogramm wird kein JavaScript-Code benötigt, daher gibt es keine Abhängigkeit von Dateien. Ich möchte zunächst das einfache Seitenlayout skizzieren. Jeder paginierte Link führt zu einer anderen HTML-Seite mit einer Liste von insgesamt 5.
Sie werden schnell die kommentierte Zeile bemerken, die eine vorherige Schaltfläche enthält, um zwischen den Seiten zu wechseln. Ich habe diesen Link nur in den anderen Layouts angezeigt, da wir auf der ersten Seite keine Möglichkeit haben, zu einer vorherigen Seite zurückzukehren. Auch der erste Listeneintrag .Single hat keinen Anker-Link, es zeigt nur die aktuelle Seitennummer und die Gesamtzahl der Seiten an.
Das obige Beispiel wird aus kopiert Index-2.html welche die zweite Seite anzeigt. Sie werden feststellen, dass jede einzelne numerische Seite keinen Anker hat, der auf sich selbst zurückführt. Stattdessen wenden wir eine Klasse von an .aktuell auf das Listenelement für ein anderes Erscheinungsbild.
Allgemeine Seitenstile
Ich habe das Stylesheet zusammen mit den typischen Seitenrücksetzungen in Segmente aufgeteilt. Dies erleichtert das Kopieren und Einfügen des genauen Stils von Seitenumbrüchen, mit denen Sie arbeiten möchten.
Nichts anders als hier bei meinen anderen Tutorials. Mit der äußeren .paginieren Klasse auf der ungeordneten Liste bedeutet, dass dies auf allen Seiten für jeden UL gilt. Dadurch wird die generische Schriftgröße erhöht und gleichzeitig sichergestellt, dass die Liste die gesamte Breite des übergeordneten Containers umfasst.
Direkt unter diesem Code finden Sie die anderen 5 Blöcke für jeden der Seitenbereiche. Dies ist ein Beispiel aus meiner ersten Designidee. Der Kontainer .paginate.pag1 Es gibt keine Standardstile. Wenn Sie jedoch etwas direkt auf diese ungeordnete Liste anwenden möchten, können Sie dies durch das Anpassen einzelner Paginierungsstile tun.
Die Links verwenden einen flachen Hintergrund mit einigen Schattenfeldern, die beim Klicken aktualisiert werden. Es ist ein einfaches Design, das sich wirklich in jedes Website-Layout einfügen lässt, vorausgesetzt, Sie aktualisieren das Farbschema ein wenig.
Weitere Paginierungsstile
Wenn Sie sich meinen zweiten Entwurf anschauen, stellen Sie möglicherweise fest, dass dieser um die auf Pixels Daily veröffentlichte Minimal Pagination PSD gebaut wurde. Ich gab den Schatten mehr Länge und hielt die Schriftgröße kleiner. Aber es ist eine fantastische Vorlage, die Sie sehr schnell anpassen können.
Eine weitere coole Version von Pixels Daily mit dem Namen Slick Pagination Links enthält eine PSD- und CSS-Kopie. Meine dritte Demo basiert auf diesem Design, aber ich habe den gesamten CSS-Code selbst geschrieben.Ich habe versucht, ähnliche Farben im Verlauf zu finden, verwendete jedoch eine dickere Umrandung um jede Verbindung.
Es wird wahrscheinlich am besten aussehen, wenn Sie einen helleren Hintergrund oder einen leichten UL-Behälter verwenden. Die Aktualisierung der Rand- und Hintergrundverläufe würde jedoch nicht viel Arbeit mit einem Farbschema-Designer erfordern. Aktive und Hover-Zustände aktualisieren einfach den Hintergrund und ich habe mich vom Ändern der Kästchenschatten ferngehalten.
Alle diese Designs können um verschiedene Arten von Schriftarten, Symbolen, Füllzeichen und anderen CSS-Funktionen erweitert werden. Mein gesamter Code wird auf den kleinsten gemeinsamen Nenner geschrieben, sodass diese Stile hoffentlich mit jeder Webseite gut funktionieren können.
Abgerundete Nav-Links
Meine letzten beiden Seiten verwenden dieselbe Art von Design, kehren aber einfach das Farbschema von hell nach dunkel um. Ich zeige nur die dunkleren CSS-Codes, da diese mehr Änderungen enthalten. Neben den Farben sollten alle Anzeigeeigenschaften perfekt übereinstimmen.
Dieses spezielle Design basiert auf einer erstklassigen PSD namens Flat Pagination Interface, ebenfalls von Pixels Daily. Wenn Sie den Screenshot betrachten, sehen Sie, dass er eine kleinere Liste hat und die Ellipsen verwenden, um zwischen den Seiten zu liegen. Dies ist üblich, wenn Sie mindestens 10 Seiten in der Liste haben und nicht alle auf einmal anzeigen möchten.
Ich habe bereits erwähnt, dass wir die äußere ungeordnete Liste mithilfe des Klassennamens wie z. B. ausrichten können .paginate.pag5. Es hilft beim Demo-Link, aber es wird wahrscheinlich auf einer Live-Website nicht nützlich sein, es sei denn, Sie beabsichtigen, verschiedene Seitenarten zu verwenden.
Jeder dieser beiden letzten Stile enthält CSS3-Übergänge für Schwebeflugzustände. Dies ist eine schöne zusätzliche Funktion, die Sie vielleicht behalten möchten, aber es sieht nicht immer gut aus.Sowohl das helle als auch das dunkle Farbschema enthält grüne Lichter, die dem Seitenlayout entsprechen. Wenn Sie dieses Design mögen, spielen Sie mit den Farben herum und sehen Sie, ob die helle oder dunkle Oberfläche für Ihr Projekt besser aussieht.
Live Demo - Quellcode herunterladen
Schließen
Viele dieser Techniken können mit Ihren eigenen Stilen angepasst werden, um eine einzigartige Website-Paginierung zu erstellen. Es ist nicht für jede Website ein entscheidender Aspekt, wird jedoch sofort wichtig, wenn Sie mit einer großen Menge an Inhalten zu tun haben.
Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen und diese CSS-Stile für jede Website-Paginierung zu verwenden. Wenn Sie Fragen oder Anregungen haben, können Sie uns unten im Diskussionsbereich mitteilen.