Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Challenge: Die Navigation im Fußbereich gestalten
Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
Challenge: Die Navigation im Fußbereich gestalten
(Musik) In der Challenge zu diesem Kapitel geht es um die Gestaltung des Fußbereiches, genau genommen um die Navigation im Fußbereich. Sie sollen auf der Übungswebsite den Fußbereich wie folgt gestalten. Die Links für Impressum und Datenschutz sollen links am Anfang stehen. Zwischen den beiden Links soll ein senkrechter Trennstrich erscheinen. Der Link nach oben soll in derselben Zeile stehen, aber ganz rechts außen. Und das CSS soll in Stylesheet layout.css gespeichert werden. Damit Sie eine visuelle Vorstellung davon bekommen, sehen Sie hier ein mögliches Ergebnis. Im Browser unten ist der Fußbereich, die beiden Links zu Impressum und Datenschutz, ganz links, rechts davon getrennt, der Link nach oben, und ein bisschen Luft drum rum, und der senkrechte Strich zwischen den beiden Links. So könnte das aussehen. Lassen Sie Ihre Vorstellung freien Lauf. Sie brauchen dazu normale Eigenschaften aus dem Blockformatting-Context und natürlich ein bisschen Flexbox.
Inhalt
-
-
-
-
-
-
-
(Gesperrt)
Flexbox und Grid: das moderne CSS-Layout1 Min. 45 Sek.
-
(Gesperrt)
Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items4 Min. 4 Sek.
-
(Gesperrt)
Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme3 Min. 1 Sek.
-
(Gesperrt)
Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow4 Min. 3 Sek.
-
(Gesperrt)
Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self5 Min. 2 Sek.
-
(Gesperrt)
Automatische Abstände für Flex-Items mit margin: auto2 Min. 44 Sek.
-
Flexibilität für Flex-Items: Die Zauberformel flex: 14 Min. 53 Sek.
-
(Gesperrt)
Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren4 Min. 4 Sek.
-
(Gesperrt)
Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen5 Min.
-
(Gesperrt)
Die wichtigsten Flexbox-Eigenschaften auf einen Blick2 Min. 48 Sek.
-
(Gesperrt)
Challenge: Die Navigation im Fußbereich gestalten1 Min. 29 Sek.
-
(Gesperrt)
Solution: Die Navigation im Fußbereich gestalten3 Min. 46 Sek.
-
(Gesperrt)
-
-
-