Nwlapcug.com


Come fare una barra di navigazione

Come fare una barra di navigazione


Rendere la propria barra di navigazione orizzontale, oppure "navbar", con linee di codice html. Codice HTML e CSS viene digitato in un editor di testo come blocco note, dove le informazioni come testo, colore e collegamenti vengono immessi 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.

Istruzioni

1

Aprire il programma blocco note.

2

Creare i diversi link per la vostra barra di navigazione e il padding e margin per esso copiando e incollando il seguente nel tuo blocco note:

< ul id = "elenco-nav" >
< li >< un href = "#" > Home < /a >< / li >
< li >< un href = "#" > About Us < /a >< / li >
< li >< un href = "#" > Servizi < /a >< / li >
< li >< un href = "#" > Prodotti < /a >< / li >
< li >< un href = "#" > contatto < /a >< / li >
</UL >

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

3

Rendere la navbar andare in una linea attraverso la pagina Web copiando e incollando il seguente nel tuo blocco note:

UL #list-nav li {
display: inline
}

4

Creare i collegamenti per la navbar copiando e incollando il seguente:

UL #list-nav li a {
Proprietà Text-decoration: none;
padding: 5px 0;
Larghezza: 100px;
background: #485e49;
colore: #eee;
float: left;

5

Allineare il testo nella barra di navigazione copiando e incollando il seguente:

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

6

Creare un colore rollover copiando e incollando il seguente:

UL #list-nav li un: hover {
background: #a2b3a1;
Color: #000
}

7

Modificare i colori digitando il codice per il colore della vostra scelta. Trovare tutti i simboli "#" e sostituirli con gli indirizzi URL per creare i collegamenti per la "Casa," "Chi siamo", "Servizi", "Prodotti" e "Contatto".

8

Salvare il file di codice di barra di navigazione nel tuo blocco note. Premere "Ctrl" + "A" per selezionare tutto. Aprire la pagina Web e andare all'editor HTML CSS. Premere "Ctrl" + "V" per copiare il codice di barra di spostamento. Salvare il codice per inserirlo nella tua pagina Web.