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.