Katalog - dies ist ein wichtiger Teil jeder Website, mit dem Sie viele verschiedene Informationselemente organisieren und anzeigen können. Von Bildgalerien bis hin zu Produktlisten verleihen Kataloge unseren Online-Projekten Struktur und Logik. In diesem ausführlichen Tutorial werden wir uns ansehen, wie man mit CSS, der Technologie für Webseitenstile, einen schönen und funktionalen Katalog erstellt.
Cascading Style Sheets (CSS) - dies ist die Sprache, die für die Gestaltung von Webseiten verwendet wird. Damit können Sie Farben, Schriftarten, Einrückungen und das Layout der Elemente einer Webseite festlegen. Einer der Hauptvorteile von CSS besteht darin, wiederverwendbare Stile mithilfe von Klassen und IDs erstellen zu können.
In diesem Handbuch stellen wir Ihnen die Schritte vor, mit denen Sie ein Verzeichnis mit CSS erstellen können. Sie benötigen grundlegende Webentwicklungsfähigkeiten, einschließlich HTML- und CSS-Kenntnisse. Sie können auch einen Texteditor (z. B. Sublime Text, Visual Studio Code oder Notepad++) verwenden, um CSS-Code zu schreiben.
Schritt 1: Einrichten der HTML-Struktur
Bevor wir mit dem Erstellen eines Katalogs mit CSS beginnen, müssen Sie die grundlegende HTML-Struktur anpassen. In diesem Schritt definieren wir die Hauptstruktur, die unser Verzeichnis enthalten wird.
Zuerst erstellen wir eine Haupttabelle. Normalerweise benötigt ein Katalog mehrere Spalten, daher fügen wir dem Tabellenkopf eine entsprechende Anzahl von Zellen hinzu. Wenn der Katalog beispielsweise aus drei Spalten besteht (Titel, Beschreibung, Bild), sieht die Tabelle wie folgt aus:
| Titel | Die Beschreibung | Darstellung |
|---|
Alle Einträge im Verzeichnis werden den Zeilen der Tabelle hinzugefügt (
), die die entsprechende Anzahl von Zellen mit Daten für jede Spalte enthalten. Auf diese Weise repräsentiert jede Zeile einen einzelnen Eintrag im Verzeichnis.
Um ein Verzeichnis mit CSS zu erstellen, müssen wir die HTML-Struktur korrekt anpassen. Das Erstellen einer Haupttabelle mit den gewünschten Spalten ist der erste Schritt in diesem Prozess.
Schritt 2: Anwenden von CSS-Stilen auf das Verzeichnis
Zunächst erstellen wir Stilklassen für die Hauptelemente des Katalogs. Erstellen wir zum Beispiel eine Klasse .catalog für einen Katalogcontainer, Klasse .product für jedes einzelne Produkt und jede Klasse .price für den Preis der ware.
Für eine Klasse .catalog sie können die Hintergrundfarbe, die Bemaßungen und die Einrückung festlegen. Für eine Klasse .product sie können den Rahmenstil, die Hintergrundfarbe und die Einrückung anpassen. Und für die Klasse .price stellen Sie die Farbe, die Schriftgröße und die Fettschrift ein.
Um Stile anzuwenden, fügen wir den entsprechenden Elementen im HTML-Markup Klassen hinzu. Zum Beispiel fügen wir hinzu class="catalog" zum Katalogcontainer, class="product" zu jedem produkt und class="price" zum Preis.
Nachdem Sie die Klassen hinzugefügt haben, können Sie mit der Definition von Stilen innerhalb des Tags fortfahren. Schreiben Sie Code, um alle gewünschten Stile für jede Klasse anzuwenden. Vergessen Sie nicht, den genauen Klassennamen und die Stile anzugeben, die Sie anwenden möchten. Zum Beispiel:
.catalog .product .price
Nachdem Sie die Stile geschrieben und die CSS-Datei gespeichert haben, aktualisieren Sie die Katalogseite im Browser und stellen Sie sicher, dass die Stile erfolgreich angewendet wurden. Bei Bedarf können Sie weitere Anpassungen und Änderungen vornehmen, um das gewünschte Erscheinungsbild des Katalogs zu erreichen.
Schritt 3: Hinzufügen von Funktionen zum Verzeichnis
Nachdem wir nun eine grundlegende Katalogstruktur mit CSS erstellt haben, fügen wir einige Funktionen hinzu, damit Benutzer mit Katalogelementen interagieren können.
Der erste Schritt besteht darin, Links zu jedem Artikel im Katalog hinzuzufügen. Dazu verwenden wir ein Tag . Nehmen Sie jedes Element der Katalogliste und wickeln Sie es in ein Tag ein . Zum Beispiel:
Jetzt, da wir Links zu Produkten haben, können Benutzer auf diese klicken und zu einer Detailseite über das Produkt navigieren. Solange wir diese Seiten jedoch nicht haben, können wir einfach Stubs mit einem Tag hinzufügen . Zum Beispiel:
