Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Responsive Card-Layouts 1: HTML und Basisgestaltung – Tutorial zu CSS

Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Gratismonat starten Für Ihr Team erwerben

Responsive Card-Layouts 1: HTML und Basisgestaltung

“

Das HTML für die responsiven Card-Layouts hier, sieht auf dem ersten Blick genauso aus, wie das für die Navigationen, die Grundstruktur ist mehr oder weniger dieselbe. Im Inhaltsbereich gibt es dann eine "Section" mit der Klasse "cards", die endet etwas weiter unten hier und dazwischen gibt es diverse Artikel, die jeweils die Klasse "card" haben, sieben an der Zahl hier im Beispiel und in jedem Artikel gibt es einen Hyperlink, der alles umschließt und innerhalb des Links ein "figure" mit einem Bild und ein "div" mit der Klasse "card-content", mit einer Überschrift und ein oder zwei Absätzen dadrunter. Falls Sie die Beispieldateien nicht zur Verfügung haben, erstellen Sie eine solche Datei. Sie brauchen ein paar Bilder, die groß genug sind, die Sie einbinden können, ansonsten ist das schnell nachgebaut. Was Sie in "zentrale.css" sehen, sind die üblichen Basis-Stylesheets und hier "card-styles.css", die hier eingebunden ist. Kurz noch ein Blick auf "layout.css", das ist eine kleine Besonderheit hier: Bei "figure" sind die Margins entfernt und für "img", das steht auf "display: block; width: 100%;" und keine "Borders". "card-styles.css", die Basisgestaltung für die Beispieldateien hier, Hintergrund von "body", von "pagehead", wir schauen uns das kurz hier im Browser an, Hintergrund von "body" und von "pagehead"; dann die Karten haben einen weißen Hintergrund und ein bisschen Abstand nach unten, auch das hier kurz, die Karten haben einen weißen Hintergrund und ein bisschen Abstand nach unten. Dann, wenn man über die Karten "hovert" mit der Maus, dann gibt es hier einen ganz kleinen, feinen Schatten und der Content selbst hat hier noch ein bisschen Padding, die Überschriften und die "card-content p", also die Inhalte, der Text ist ein bisschen kleiner als der Rest. Das ist die Basisgestaltung und das sieht dann im Browser so aus: Hier ein Bild nach dem anderen, norwegische Semmel, Dinosaurier, süße Überraschung, Schokoladenfrösche. Sie können aber gerne andere Bilder benutzen, denn die Bilder selbst sind hierbei nicht so von Interesse.

Inhalt