Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

Responsive Card-Layouts 1: HTML und Basisgestaltung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im HTML ist jede Karte ein "<article>" der Klasse card, die mit ein bisschen einfachem CSS gestaltet werden kann.

Transkript

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.

CSS: Responsive Flexbox-Layouts für Profis

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!