Non tutti i siti web utilizzano barre di navigazione per i loro menu del sito. Una fila di pulsanti in grado di visualizzare collegamenti ad altre parti del sito, anche se i "bottoni" non sono pulsanti tecnicamente. Il codice HTML strutturale per entrambi i tipi di navigazione è lo stesso, e gran parte del CSS (Cascading Style Sheets), il codice è anche lo stesso. Quando si crea una fila di pulsanti di navigazione orizzontale, stile di un elenco puntato in pulsanti che tutto galleggiante a fianco di ogni altro. Styling i collegamenti stessi li rende più facili per fare clic e funziona bene in diversi tipi di browser.

istruzione

1 Creare una lista non ordinata nella pagina Web utilizzando HTML. link svolge all'interno di ogni coppia di "<li>" tag:

<Ul id = "nav">
<Li> <a href="page1.html"> Page 1 </a> </ li>
<Li> <a href="page2.html"> Pagina 2 </a> </ li>
<Li> <a href="page3.html"> Page 3 </a> </ li>
<Li> <a href="page4.html"> Pagina 4 </a> </ li>
</ Ul>

Lascia la tua lista un nome ID come indicato sopra.

2 Aprire il foglio di stile per la pagina Web e aggiungere il nuovo codice al fine del file. Se la pagina Web non c'è ancora un foglio di stile, creare un file vuoto e salvarlo come un file CSS all'interno della stessa cartella della pagina Web. Inserire questo codice dopo la "<title>" tag nel file HTML per incorporare il foglio di stile:

<Link rel = "stylesheet" href = "yourfile.css" type = "text / css" />

3 Rimuovere proiettili e imbottitura lato sinistro della lista non ordinata:

nav {

list-style: none;
padding-left: 0;
}

In questo esempio, "#nav" seleziona ogni elemento con un nome ID di "nav". Se è stato utilizzato un nome ID diverso per le "<ul>" tag, quindi sostituire "nav" con il proprio nome ID.

4 Float ogni elemento della lista a sinistra:

nav li {

float: left;
}

5 nav un {

blocco di visualizzazione; / Rende tag di ancoraggio compatibile con imbottitura /
background-color: #eeeeee;
color: # 555555;
padding: 5px 10px;
text-decoration: none;
}

Questo esempio crea luce grigio pulsanti con colore grigio scuro testo del link. Rimuovere sottolineature dai collegamenti impostando "text-decoration" a "none". L'uso imbottitura di ampliare lo sfondo intorno al testo; nell'esempio, "5px" rappresenta cinque pixel di padding verticale mentre "10px" rappresenta 10 pixel di padding orizzontale.

6 Aggiungere un margine destra di ogni tasto in modo da non urtare contro l'altro:

margin-right: 20px;

Questa coppia proprietà-valore va all'interno delle parentesi graffe dopo "#nav a."

7 Torna alla regola di stile per l'intera lista non ordinata ed effettuare le regolazioni per la spaziatura attorno al gruppo di pulsanti:

nav {

list-style: none;
padding-left: 0;
margin: 20px 0;
}

Il codice per margini è simile a quello di imbottitura, ma lo spazio effetto margini tra elementi, e non lo spazio interno di ciascun elemento. Questo esempio imposta 20 pixel di spazio di margine sulla parte superiore e inferiore del pulsante SET senza impostare i margini orizzontali.

Consigli e avvertenze

• Aggiungere "float: right" o "float: left" a tutta la lista non ordinata, se si desidera posizionare i pulsanti a destra oa sinistra della testata del sito.
• Change "margin: 20px 0" a "margin: 20px auto", se si vuole centrare i pulsanti orizzontalmente sulla pagina. Dove si vede "20px", è possibile cambiare "20" a qualsiasi numero che si desidera effettuare la spaziatura verticale.