Come fare un Navbar

May 4

Come fare un Navbar


Fai la tua barra di navigazione orizzontale, o "barra di navigazione", con linee di codice HTML. HTML e codice CSS viene digitato in un editor di testo come Blocco note, in cui le informazioni come testo, il colore ed i collegamenti vengono inseriti nel codice. Dopo aver aggiunto il codice al tuo sito web, i tuoi lettori hanno gli strumenti per visitare le altre pagine del tuo sito.

istruzione

1 Apri il programma Blocco note.

2 Creare i diversi link per la vostra barra di navigazione e l'imbottitura e il margine per esso copiando e incollando il seguente nel tuo blocco note:

<Ul id = "lista-nav">
<Li> <a href="#"> casa </a> </ li>
<Li> <a href="#"> Chi siamo </a> </ li>
<Li> <a href="#"> Servizi </a> </ li>
<Li> <a href="#"> Prodotti </a> </ li>
<Li> <a href="#"> contatto </a> </ li>
</ Ul>

ul # list-nav {
margin: 20px;
padding: 0;
list-style: none;
width: 525px;
}

3 Rendere la barra di navigazione andare in una linea attraverso la pagina web copiando e incollando il seguente nel tuo blocco note:

ul # lista-nav li {
display: inline
}

4 Creare i collegamenti per la barra di navigazione copiando e incollando il seguente:

ul # list-nav li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
background: # 485e49;
colore: #eee;
float: left;

5 Allineare il testo nella Navbar copiando e incollando il seguente:

ul # list-nav li a {
text-align: center;
border-left: #fff solido 1px;
}

6 Creare un colore rollover copiando e incollando il seguente:

ul # list-nav li a: hover {
background: # a2b3a1;
color: # 000
}

7 Modificare qualsiasi dei colori digitando il codice per il colore della vostra scelta. Trova tutti i simboli "#" e sostituirli con gli indirizzi URL per creare i collegamenti per "casa", "Chi siamo", "Servizi", "Prodotti" e "Contatto".

8 Salvare il file di codice Navbar nel blocco note. Premere il tasto "Ctrl" + "A" per selezionare tutto. Apri la tua pagina web e andare al CSS editor HTML. Premere il tasto "Ctrl" + "V" per copiare il codice Navbar. Salvare il codice da inserire nella vostra pagina web.