Herausforderung: Feste Positionierung
Aufgabe
Erstellen Sie eine Website-Navigationsleiste, die fest am oberen Rand der Webseite bleibt, damit Benutzer jederzeit darauf zugreifen können. Schritte:
- Wenden Sie
fixed
Positionierung auf die Navigationsliste an. - Wählen Sie eine Eigenschaft für die horizontale Verschiebung (
left
oderright
). - Wählen Sie eine Eigenschaft für die vertikale Verschiebung (
top
oderbottom
). - Testen Sie die Funktionalität, indem Sie auf verschiedene Links klicken und sicherstellen, dass die Seite scrollt, während die Navigationsleiste sichtbar bleibt.
index.html
index.css
- Setzen Sie die
top
-Eigenschaft auf0
, um die Navigation am oberen Rand der Webseite zu halten. - Für die horizontale Positionierung können Sie entweder
left: 0;
verwenden, um sie mit dem linken Rand des Viewports auszurichten, oderright: 0;
, um sie mit dem rechten Rand auszurichten.
index.html
index.css
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 7
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Herausforderung: Feste Positionierung
Swipe um das Menü anzuzeigen
Aufgabe
Erstellen Sie eine Website-Navigationsleiste, die fest am oberen Rand der Webseite bleibt, damit Benutzer jederzeit darauf zugreifen können. Schritte:
- Wenden Sie
fixed
Positionierung auf die Navigationsliste an. - Wählen Sie eine Eigenschaft für die horizontale Verschiebung (
left
oderright
). - Wählen Sie eine Eigenschaft für die vertikale Verschiebung (
top
oderbottom
). - Testen Sie die Funktionalität, indem Sie auf verschiedene Links klicken und sicherstellen, dass die Seite scrollt, während die Navigationsleiste sichtbar bleibt.
index.html
index.css
- Setzen Sie die
top
-Eigenschaft auf0
, um die Navigation am oberen Rand der Webseite zu halten. - Für die horizontale Positionierung können Sie entweder
left: 0;
verwenden, um sie mit dem linken Rand des Viewports auszurichten, oderright: 0;
, um sie mit dem rechten Rand auszurichten.
index.html
index.css
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 7