May 4
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.
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.