October 9
Molte delle barre di navigazione colorata che si vede su Internet non sono altro che elenchi. Un elenco HTML è un elemento della pagina Web che contiene i valori di testo come Home, Contatti e FAQ. Potreste aver visto le barre di navigazione con quelle parole prima. Gli sviluppatori Web aggiungere colore e stili per gli elenchi HTML utilizzando fogli di stile CSS, o CSS. Imparando alcune regole CSS, è possibile attivare un elenco semplice in un impressionante barra di navigazione per il tuo sito.
1 Lancio "Blocco note".
2 Aprire una delle tue pagine web, e aggiungere il seguente testo alla sezione di corpo del codice HTML:
<Div>
<Ul id = "navBar">
<Li id = "attivo"> <a href="Home</a> & lt; / li "> http://www.whitehouse.gov"> Casa & lt; / a> & lt; / li>
<Li> <a href="Products</a> & lt; / li "> http://www.whitehouse.gov"> Prodotti & lt; / a> & lt; / li>
<Li> <a href="Contact</a> & lt; / li "> http://www.whitehouse.gov"> Contatto & lt; / a> & lt; / li>
<Li> <a href="Support</a> & lt; / li "> http://www.whitehouse.gov"> Supporto & lt; / a> & lt; / li>
</ Ul>
</ Div>
Questo crea una semplice lista non ordinata. Le liste non ordinate sono le liste che non hanno una sequenza di numerazione, come ad esempio 1, 2 e 3. Il tag HTML "ul" definisce la lista non ordinata. Il tag "ul" fa riferimento a una classe CSS chiamato "navBar." Quella classe definisce l'aspetto di ogni cosa nella lista. Ogni elemento della lista ha un valore di testo unico. In questo esempio, questi valori sono "casa", "prodotti", "Contatto" e "Supporto".
3 Notare i tag "href" sulle voci di elenco. Ognuno punti a un URL. In questo esempio, tutti rimandano al sito Whitehouse. Modificare tali URL per qualcosa che ti piace.
4 Aggiungere il seguente testo alla sezione "testa" del codice HTML:
<Style>
ul # navBar
{
white-space: nowrap;
margin-left: 0;
padding-left: 0;
}
navBar Li
{
list-style-type: none;
display: inline;
}
navBar un {padding: 4px 12px; } NavBar a: link, #navbar a: visited
{
text-decoration: none;
colore bianco;
background-color: verde;
}
navBar a: hover
{
text-decoration: none;
colore: giallo;
background-color: black;
}
</ Style>
Questo codice definisce la classe "navBar" a cui fa riferimento la lista. La proprietà "list-style-type" è impostato su "Nessuno". Il valore "none" rimuove i proiettili normali che si vedono in giro gli elementi della lista. La proprietà "Display" è impostato su "inline". Questo crea una barra di navigazione orizzontale. Per produrre una barra di navigazione verticale, modificare il valore da "in linea" a "blocco".
5 Nota la proprietà "padding". Esso controlla la spaziatura intorno al testo nelle voci di elenco. Il primo valore, "4px," crea 4 pixel sopra e sotto ciascun elemento. Il secondo valore, "12px" determina il numero di pixel tra ogni volta la lista. Aumentare il valore per creare barre di navigazione più ampi.
6 Individuare la riga che legge "#navbar a: link, #navbar a: visited." La proprietà "colore" in quel blocco di codice imposta il colore del carattere. In questo esempio, che il colore è bianco. Il colore di sfondo è verde. È inoltre possibile modificare questi colori. Il blocco di codice finale, "#navbar a: hover," controlla come un elemento della lista cambierà quando si passa il cursore del mouse su di esso. In questo caso, i cambiamenti di colore del carattere al giallo e lo sfondo colore diventa nero. È inoltre possibile utilizzare i propri colori per creare il look che preferite.
7 Salvare la pagina Web e aprirlo nel browser. Si vedrà una barra di navigazione che contiene gli elementi della lista. Muovi il mouse sopra gli elementi. I loro colori cambiano, come si posiziona su di loro. Fare clic su uno degli elementi della barra di navigazione. Il tuo browser passare alla URL definito nella lista.