Jahreszeiten (Status1)

HIER geht es zu den Jahreszeiten-Seiten.

Dies ist die Rohfassung der Übung. Es sind folgende Aufgaben durchzuführen:

Aufgabenliste:

  1. Einbinden der css-Datei jahreszeiten.css im Ordner Styles (alle 4 Jahreszeiten-Dateien)
  2. Prüfe, ob alle 4 Jahreszeiten mit den Styles verbunden sind.
  3. Verhindere die Anzeige der Aufzählungspunkte für die Liste der Navigations-Links
    Verwende die Eiganschaft list-style-type:none für nav ul
  4. Verhindere, dass die Links in nav ul unterstrichen werden mit
    text-decoration:none für nav ul a
  5. Setze den Hintergrund background:lightgrey für nav ul li
  6. Setze einen durchgezogenen Rahmen border:1px solid grey für nav ul li
  7. Lege den Außenabstand margin:.2rem für nav ul li fest.
  8. Lege den Innenabstand padding:.3rem für nav ul li fest.
  9. Wenn so viele Menüpunkte vorhanden wären, dass es mehrzeilig wird,
    wäre auch von Vorteil, die Zeilenhöhe line-height:2rem; für nav ul li zu setzen.
  10. Erstelle für die Pseudoklasse hover von nav ul li einen weißen Hintergrund mit
    nav ul li:hover{background:white;}
  11. Während des Hover-Effekts soll die Schriftfarbe der Links rot werden.
    Deshalb setze color:red für nav ul li:hover a
  12. Setze für alle Überschriften 1. Ordnung die Schriftfarbe auf beige,
    den Text-Schatten mit text-shadow:.2rem .2rem brown; auf braun,
    und lege die Schriftgröße mit font-size:3rem; für h1 fest.
  13. Lege für sämtliche Images die Breite auf 10rem mit img{width:10rem;} fest.
  14. Verändere die Schriftgröße für alle Absätze p mit p{font-size:1.6rem;} auf das 1,6-fache.
  15. Damit der Text die Bilder umfließt, setze für die Images die Eigenschaft float auf left
    mit float:left;
  16. Damit der Text nicht so knapp am Bild klebt, setze für img einen Abstand mit
    margin-right:1rem;
  17. Ersetze in der fruehling.html den ersten Menüpunkt für HOME durch eine Grafik mit,
    <a href="./index.html"><img src="../grafiken/home.jpg"></a>
  18. Da diese Grafik viel zu groß angezeigt wird, setze die Breite auf 2rem mit
    nav ul a img{width:2rem;}
  19. Führe die Ersetzung des HOME Links durch die Grafik auch in den 3 anderen Jahreszeiten durch.
  20. Gib dem wrapper einen Box-Schatten durch die zusätzliche Eigenschaft
    box-shadow:0 0 5rem tan;