Wie man ein CSS-Baum-Menü

Eine Menüstruktur besteht aus mehrere Menüelemente für die Navigation einer Website. Ein CSS oder Cascading Style Sheets, Menü ist ein Menü mit CSS-Code formatiert. CSS ist eine Web-Elementformatierung Sprache. CSS-Menüs bestehen aus zwei Teilen, der HTML-Code zum Erstellen der Menüstruktur und ihre Beschriftungen und der CSS-Code für die Formatierung der Menü-Eingabefelder, Grenzen, Etiketten und Mouseover-Interaktivität.

Anweisungen

Die CSS-Datei erstellen

1 Starten Sie ein neues Dokument in dem Programm, das Sie, zum Erstellen von CSS verwenden und HTML-Dokumente.

2 Geben Sie den folgenden Code in der ersten Zeile des neuen Dokuments:

@charset "Utf-8";

Dieser Code weist den Browser ist dies eine CSS-Datei enthält.

3 Drücken Sie die EINGABETASTE zweimal um eine Leerzeile zwischen der ersten Zeile des Codes und die nächste Zeile zu platzieren.

4 Drücken Sie die EINGABETASTE zweimal um eine Leerzeile zwischen der ersten Zeile des Codes und die nächste Zeile zu platzieren.

Geben Sie (oder schneiden Sie aus und fügen Sie ein) den folgenden Code:

a: link {}Farbe: #414958;Text-Decoration: underline;}ein: {besuchtFarbe: #4E5869;Text-Decoration: underline;}ein: Hover, ein: aktiv, ein: {} zu konzentrierenText-Decoration: none;}

{UL.NAV}List-Style: none;Border-Top: 1px solid #666;Margin-Bottom: 15px;}UL.NAV li {}Border-Bottom: 1px solid #666;}UL.NAV a, ul.nav ein: {besuchtPadding: 5px 5px 5px 15px;Display: block;Text-Decoration: none;Hintergrund: #8090AB;Farbe: #000;}UL.NAV ein: Hover, ul.nav ein: aktive, ul.nav ein: {} zu konzentrierenHintergrund: #6F7D94;Farbe: #FFF;

Dieser Code formatiert der Menüstruktur Menü-Boxen, Menü Feld Ränder, Menü-Beschriftungen, Menühintergrund und es schafft die Interaktivität des Maus-Cursors. Z. B. wenn der Benutzer ihren Mauszeiger über ein Menüelement bewegt wird, enthält das Element ändert sich die Farbe und der Text ändert sich von schwarz zu weiß. Sie können das Aussehen und Verhalten der Menü-Struktur ändern, durch Ändern der Werte für die einzelnen Eigenschaften. Die Etikett Textfarbe zu ändern, würden Sie beispielsweise den folgenden Selektor bearbeiten:

UL.NAV ein: Hover, ul.nav ein: aktive, ul.nav ein: {} zu konzentrierenHintergrund: #6F7D94;Farbe: #FFF;}

Die Farbe des Textes wird durch die "Color"-Eigenschaft gesteuert. Der aktuelle Wert "#FFF," erzeugt schwarzen Text. Um die Farbe zu grau zu ändern, ändern Sie den Wert auf "#666."

Sofern Sie mit CSS-Programmierung vertraut sind, wird immer das gewünschte Aussehen und Verhalten Experimente erfordern.

5 Drücken Sie die EINGABETASTE zweimal um eine Leerzeile zwischen der letzten Zeile des Codes und die nächste Zeile zu platzieren.

6 Geben Sie den folgenden Code:

{.sidebar1}Float: left;Breite: 20 %;Hintergrund: #93A5C4;Padding-Bottom: 10px;} Wenn Sie

Dies erstellt einen Seitenleiste-Container um die Menüstruktur zu halten.

7 Speichern Sie die Datei als "menu.css."

Die HTML-Datei erstellen

8 Starten Sie eine neue HTML-Datei in das Programm, das Sie zum Erstellen von CSS und HTML-Dokumenten verwenden.

9 Geben Sie (oder schneiden Sie aus und fügen Sie ein) den folgenden Code in der ersten Zeile des neuen Dokuments:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd & Quot; >< html Xmlns = "http://www.w3.org/1999/xhtml & Quot; >< Head >

Dieser Code wird der Browser angewiesen, dies ist eine HTML-Webseite und welche Standards zu verwenden, um die Seite zu formatieren.

10 Geben Sie den folgenden Code:

< Körper >

< Div Class = "Randleiste1" >

Dieser Code beginnt den inhaltlichen Teil der Webseite und erstellt den Container Seitenleiste, um das Menü zu halten.

11 Beginnen einer neuen Zeile, und geben Sie den folgenden Code:

< Ul-Klasse "Nav" = >

<li><a href="#">Label 1</a></li> <li><a href="#">Label 2</a></li> <li><a href="#">Label 3</a></li> <li><a href="#">Label 4</a></li> </ul>

< / Div >< / body >< / html >

Dieser Code erstellt das Menü, schließt den Seitenleiste-Container und bedeutet das Ende der Webseite. Sie können beliebig viele Menüpunkte wie Sie, erstellen Sie ein neues Listenelement wie möchten erstellen "< li >< a Href ="#"> Label 5 </a >< / li >," für jeden einzelnen. Funktionierende Links zu erstellen, ersetzen das Pfund Zeichen (#) mit den gewünschten URLs. Ändern der Menü-Beschriftungen, ersetzen die aktuellen Etiketten, d.h. "Label 1", "Beschriftung 2," etc., mit den gewünschten Beschriftungstext.

12 Benennen Sie und speichern Sie die Datei.

Tipps & Warnungen

• Wenn Sie diese Web-Seite an den Webserver hochladen, vergiss nicht menu.css hochladen. Andernfalls wird Ihr Menübaum nicht richtig formatiert.