9 - Navigation Formatieren

1. Markiere in der Navigation das a-Element
   <nav class="top"><ul><li><a href="../index.html">Home</a></li> ... </ul></nav>
2. Mit Menu >Navigation >Schnell bearbeiten (Ctrl+E) öffnest du das Eingabefenster für die CSS-Stile
   (Du kannst deine Wahl präziser "selektieren", indem du das a-Element im nav-Element formatierst)
3. Ergänze "a{}" mit "nav a{}", setze folgende CSS-Eigenschaften :
   
   • Textfarbe (Rot): color: #FF2828;
   • Unterstreichung (entfernen): text-decoration: none;
4. Um eine Formatierung beim Darüberfahren zu erstellen, markiere die gesamte CSS-Deklaration und kopiere sie:
   nav a {
       color: #FF2828;
       text-decoration: none;
   }
5. Füge sie auf der nächsten Zeile ein und erweitere sie um den Pseudo-Selektor :hover
   ändere die Textfarbe, entferne "text-decoration", diese Angabe muss nicht wiederholt werden:
   nav a:hover {
       color: #b20000;
   }
6. Markiere in der Navigation das ul-Element um die Listenpunkte zu entfernen
   <nav class="top"><ul><li><ahref="../index.html">Home</a></li> ... </ul></nav>
7. Mit Menu >Navigation >Schnell bearbeiten (Ctrl+E) öffnest du das Eingabefenster für die CSS-Stile
   (Du kannst deine Wahl präziser "selektieren", indem du das ul-Element im nav-Element formatierst)
8. Ergänze" ul {}" mit "nav ul {}", setze folgende CSS-Eigenschaften :
   
   • Listenpunkte entfernen: list-style-type: none;
   • Innenabstand: padding:12px;
9. Speichere alle deine Dateien
   (Beachte: Die Formatieungen für die Navigation wurde "nur" in der Datei: weblabor.css eingetragen.)

10.  Mit Klick auf den Button "Live-Vorschau" kannst du die Startseite im Browser öffnen

Beispieldateien: Startseite verlinkt

Code-Beispiel - Navigation formatiert: weblabor.css

nav a {
    color:#ff2828;
    text-decoration: none;
}
nav a:hover {
    color:#b20000;
}

nav ul {
    list-style-type: none;
    padding:12px;
}