Hinzufügen ein Bildes zu einer Navigationsleiste Menü

Ein Navigations-Bar-Menü enthält Links, die auf Seiten von innerhalb oder außerhalb Ihrer Website. Es ist vollständig anpassbar und kann auch ein Hintergrund-Farbe, Bild und Drop-Down/Flyout-Menü. Bilder können Schaltflächen statt Text in der Navigation angezeigt. Blätter Cascading Stylesheets (CSS) können, die Sie die Navigationsleiste mit dem Bild Stil, die Sie verwenden möchten. Sie können festlegen, dass die Abmessungen passen dein Bild oder die Größe des Bildes für Ihr Design.

Anweisungen

1 Starten Sie Notepad, TextPad, WordPad oder Ihrem bevorzugten Texteditor. Wählen Sie im Menü "Datei" und "Open". Ein Dialogfeld wird geöffnet. Doppelklicken Sie auf die HTML-Datei, die Sie ändern möchten.

2 Fügen Sie den folgenden Code zwischen die < HEAD >-Tag, um einen Stil für das Navigations-Bar-Menü erstellen. Das #navbar-Element wird Elemente innerhalb der Navigationsleiste aufzunehmen. Der Code "background:URL('URL')" wird das Hintergrundbild für jedes Menüelement angezeigt.

< Typ style = "Text/Css" >

<!--

Navbar {} Breite: 900px;

Höhe: 50px;

Padding: 0;

Display: Inline;

}

{Start} Float: Left;

Breite: 150px;

Höhe: 50px;

Background:URL('URL');

}

über {} Float: Left;

Breite: 150px;

Höhe: 50px;

Background:URL('URL');

}

{Kontakt} Float: Left;

Breite: 150px;

Höhe: 50px;

Background:URL('URL');

}

-->

< / style >

3 Ersetzen Sie die Abmessungen des "#navbar" durch Ihre bevorzugten Einstellungen; Sie sollte groß genug für jedes Element Bild. Die Abmessungen der einzelnen Menü-Elemente zu ersetzen (z.B., "#home," "#about," "#contact") mit den Abmessungen Ihrer Bilder. Ersetzen Sie "URL" durch den Speicherort Ihrer Bilddateien.

4 Fügen Sie den folgenden HTML-Code zwischen die < BODY >-Tag. Es wendet den Stil auf das Navigationsmenü Bar und zeigt Ihre Bilder an.

< Div Id = "Navbar" >

< Div Id = "Startseite" >< / Div >

< Div Id = "über" >< / Div >

< Div Id = "Kontakt" >< / Div >

< / Div >