Kursinhalt

Fortgeschrittene CSS-Techniken

1. Einführung

Kursübersicht Kursfokus Kursthemen Wie Man Erfolgreich Ist

2. Elementpositionierung

Was Ist Positionierung?Relative Positionierung Herausforderung: Relative Positionierung Absolute Positionierung Herausforderung: Absolute Positionierung Feste Positionierung Herausforderung: Feste Positionierung Sticky-Positionierung Herausforderung: Sticky Positionierung Stapelreihenfolge Herausforderung: Stapelreihenfolge Inhaltsüberlauf

3. Übergänge

Was Ist Eine Transition?Übergangseigenschaft Auswählen Übergangsdauer Übergangszeit Funktion Übergangszeitverzögerung Übergangskombination Herausforderung: Übergang Hinzufügen

4. Animationen

Was Ist Animation?Festlegen der Animationszeit Steuerung der Animationswiedergabemenge und -Richtung Verwaltung des Animationszustands Animationskomposition Herausforderung: Animation Hinzufügen

5. Transformationen

Was Ist Transformation?Skalierung Rotieren Herausforderung: Skalierung und Drehung Hinzufügen Übersetzen Schrägstellung Perspektive Herausforderung: Hinzufügen von Übersetzungen und Schrägstellungen

6. Adaptive/Responsive Websites und Apps

Was Ist Adaptives/Responsives Design?@media-Abfrage Adaptive - Responsive Layouts Untersuchen der Webseite Herausforderung: Überprüfung des Adaptiven/Responsiven Layouts

7. Präprozessoren

Was Ist Ein Präprozessor?Sass Syntax Sass Variables Sass Numerische Operatoren Sass-Verschachtelung @extend-Direktive Ordner-Datei-Struktur

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 oder right ).
Wählen Sie eine Eigenschaft für die vertikale Verschiebung ( top oder bottom ).
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 auf 0 , 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, oder right: 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 alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Fortgeschrittene CSS-Techniken

1. Einführung

Kursübersicht Kursfokus Kursthemen Wie Man Erfolgreich Ist

2. Elementpositionierung

3. Übergänge

Was Ist Eine Transition?Übergangseigenschaft Auswählen Übergangsdauer Übergangszeit Funktion Übergangszeitverzögerung Übergangskombination Herausforderung: Übergang Hinzufügen

4. Animationen

Was Ist Animation?Festlegen der Animationszeit Steuerung der Animationswiedergabemenge und -Richtung Verwaltung des Animationszustands Animationskomposition Herausforderung: Animation Hinzufügen

5. Transformationen

6. Adaptive/Responsive Websites und Apps

Was Ist Adaptives/Responsives Design?@media-Abfrage Adaptive - Responsive Layouts Untersuchen der Webseite Herausforderung: Überprüfung des Adaptiven/Responsiven Layouts

7. Präprozessoren

Was Ist Ein Präprozessor?Sass Syntax Sass Variables Sass Numerische Operatoren Sass-Verschachtelung @extend-Direktive Ordner-Datei-Struktur

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 oder right ).
Wählen Sie eine Eigenschaft für die vertikale Verschiebung ( top oder bottom ).
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 auf 0 , 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, oder right: 0; , um sie mit dem rechten Rand auszurichten.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7