Creazione di una barra di navigazione orizzontale con i CSS è una competenza HTML valido. È possibile costruire barre di navigazione professionali che è possibile utilizzare in qualsiasi sito web. È possibile modificare il colore, la dimensione e colori dei bordi senza caricare nuove immagini o modificare il codice in ogni pagina.

istruzione

1 Aprire il file HTML home page in Blocco note e creare una lista non ordinata di elementi di navigazione che si inserisce nella barra di navigazione nella vostra home page. Questo è solo un elenco semplice come si usa per creare un elenco puntato o numerato nella tua pagina web. Ecco come si presenta: <ul> <li> Il tuo primo navigazione titolo </ li> <li> la pagina della seconda navigazione </ li> e termina con </ ul>.

2 Aggiungere il tag <nav> al tag lista. Quindi, il codice HTML simile a questo: <ul id = "nav"> <li id ​​= "pagina nav-prima"> <a href="link al tuo primo page"> prima pagina di navigazione Intestazione </a> </ li > <li id ​​= "nav-secondpage"> <a href="link al secondo page"> seconda pagina Intestazione </a> </ li> e così via.

3 Aprire il file CSS. Questo file si trova in genere nella cartella css, e contiene tutte le definizioni che indicano al browser quali sono i vostri testi, proiettili e così via, sarà simile a una volta visualizzato nel browser. Segui il link nelle risorse per imparare a scrivere un file css, se non ne avete uno.

4 Digitare #nav nella parte superiore del foglio di stile CSS. Identifica che questo codice si riferisce alla vostra barra di navigazione, dato che abbiamo definito questo tag id = nav nella home page.

5 Impostare i margini e padding nel foglio di stile CSS a 0. Quindi, tipo {margin: 0; padding: 0} nel foglio di stile CSS subito dopo #nav. Il primo pezzo di codice sul foglio di stile CSS è #nav {margin: 0; padding: 0}

6 Rendere la barra di navigazione allineare in senso orizzontale. Normalmente, una lista in una pagina HTML mostra in verticale, in modo da entrare in questa parte del codice CSS, dice al browser per visualizzare questo elenco di elementi attraverso la pagina. Tipo #nav li {display: inline; padding: 0; margin: 0} nel foglio di stile CSS.

7 Aggiungere i colori e altri stili per gli oggetti di collegamento, non l'intero elenco di elementi stesso. Per fare questo, si utilizza il tag link #nav. Questo indica al browser di applicare stili ai link e rende l'intera scheda click-in grado. Digitare #nav a: link, #nav a: visited {color: # 000; background: # b2b580; }

Consigli e avvertenze

• È possibile effettuare diversi tipi di barre di navigazione, utilizzando colori e stili differenti sul foglio CSS. Ulteriori informazioni su stili CSS e sarete in grado di creare molto interessanti e attraenti barre di navigazione orizzontali.