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: Sticky Positionierung

Aufgabe

Erstellen Sie ein Blog-Layout für Tierartikel, bei dem das entsprechende Tierfoto immer sichtbar ist, während der Benutzer den Artikel liest. Wenn der Benutzer beginnt, über ein anderes Tier zu lesen, bieten Sie das nächste Tierfoto an. Schritte:

Wenden Sie sticky -Positionierung auf das Element mit dem Klassennamen illustration an.
Geben Sie die Position auf der Seite an, an der das Element sticky werden soll.

index.html

index.css

Um die Tierillustrationen oben im Ansichtsfenster zu fixieren, während der Benutzer den Artikel liest, wenden Sie die sticky -Positionierung auf das Element mit dem Klassennamen illustration an.
Setzen Sie die top -Eigenschaft auf 0 , um anzugeben, dass das Element oben im Ansichtsfenster fixiert werden soll.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 9

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: Sticky Positionierung

Aufgabe

Wenden Sie sticky -Positionierung auf das Element mit dem Klassennamen illustration an.
Geben Sie die Position auf der Seite an, an der das Element sticky werden soll.

index.html

index.css

Um die Tierillustrationen oben im Ansichtsfenster zu fixieren, während der Benutzer den Artikel liest, wenden Sie die sticky -Positionierung auf das Element mit dem Klassennamen illustration an.
Setzen Sie die top -Eigenschaft auf 0 , um anzugeben, dass das Element oben im Ansichtsfenster fixiert werden soll.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 9