Non tutti i siti Web utilizzano barre di navigazione per i loro menu sito. Una fila di pulsanti consente di visualizzare collegamenti ad altre parti del sito, anche se i "pulsanti" non sono tecnicamente i pulsanti. Il codice HTML strutturale per entrambi i tipi di navigazione è lo stesso, e gran parte del codice CSS (Cascading Style Sheets) è anche lo stesso. Quando si crea una fila di pulsanti di spostamento orizzontale, stile un elenco puntato in pulsanti che tutti float a sinistra della vicenda. Styling i collegamenti stessi li rende più semplice fare clic e funziona bene su diversi tipi di browser.

Istruzioni

1

Creare una lista non ordinata nella tua pagina Web mediante HTML. Inserire dei link all'interno di ogni coppia di tag "< li >":

< ul id = "nav" >
< li >< un href="page1.html" > pagina 1 < /a >< / li >
< li >< un href="page2.html" > pagina 2 < /a >< / li >
< li >< un href="page3.html" > pagina 3 < /a >< / li >
< li >< un href="page4.html" > pagina 4 < /a >< / li >
</UL >

Dare il tuo elenco un nome ID come indicato sopra.

2

Aprire il foglio di stile per la tua pagina Web e aggiungere nuovo codice nella parte inferiore del file. Se la pagina Web non dispone ancora di un foglio di stile, creare un file vuoto e salvarlo come un file CSS all'interno della stessa cartella come pagina Web. Inserire il codice dopo il tag "< title >" nel file HTML per incorporare il foglio di stile:

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

3

Rimuovere i proiettili e sinistra imbottitura dall'elenco non ordinato:

NAV () {

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

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

4

Ogni voce dell'elenco a sinistra del galleggiante:

NAV li {

float: left;
}

5nav a {

display: block; / tag di ancoraggio, rende compatibili con imbottitura /
colore di sfondo: #eeeeee;
colore: #555555;
padding: 5px 10px;
Proprietà Text-decoration: none;
}

Questo esempio crea pulsanti grigi chiaro con testo collegamento grigio scuro. Rimuovere le sottolineature dai collegamenti impostando "text-decoration" su "none". Utilizzare il riempimento di ampliare lo sfondo intorno al testo; Nell'esempio, "5px" rappresenta cinque pixel di riempimento verticale mentre "10px" rappresenta 10 pixel di riempimento orizzontale.

6

Aggiungere un margine di destra per ogni pulsante in modo essi non urtare contro l'altro:

margine destro: 20px;

Questa coppia di valori di proprietà va all'interno delle parentesi graffe dopo "#nav una."

7

Tornare alla regola di stile per l'intero elenco non ordinato e apportare modifiche per la spaziatura attorno al gruppo del pulsante:

NAV () {

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

Il codice per i margini è simile a quella di riempimento, ma i margini effetto spazio tra gli elementi piuttosto che lo spazio all'interno di ogni elemento. Questo esempio imposta 20 pixel di margine spazio sulla parte superiore e inferiore del pulsante senza impostare tutti i margini orizzontali.

Consigli & Avvertenze

• Aggiungere "galleggiante: giusto" o "galleggiante: sinistra" per l'intero elenco non ordinato, se si desidera posizionare i pulsanti a destra o a sinistra dell'intestazione del sito.
• Cambiamento "margin: 20px 0" a "margine: 20px auto" Se si desidera centrare i pulsanti orizzontalmente sulla pagina. Dove vedete "20px," è possibile modificare "20" a qualsiasi numero che si desidera spaziatura verticale di effetto.