March 24
Quando si codifica una pagina Web in HTML e CSS, il metodo preferito è quello di creare una lista non ordinata in HTML e quindi applicare ad esso un certo stile CSS. Non importa quanto complicato un menu diventa, la lista ordinata rimane un metodo efficace per strutturare i collegamenti. Alcuni problemi di cross-browser richiedono particolare attenzione e conoscenza approfondita del codice CSS per fare un menu orizzontale utilizzabile e mantenere la rottura.
1 Aprire il file HTML e aggiungere <ul> e </ ul> tag alla pagina Web. Tra questi tag, aggiungere link avvolti nei tag <li> e </ li>. Il tag <li> sta per "elemento della lista" e viene usato in elenchi puntati e gli elenchi numerati, ma molti sviluppatori anche utilizzare questi come base per i loro menu. Ecco un esempio di una lista non ordinata è possibile utilizzare per creare un menu:
<Ul>
<Li> <a href="page1.html"> Page 1 </a> </ li>
<Li> <a href="page2.html"> Pagina 2 </a> </ li>
</ Ul>
Il codice di cui sopra mostra due collegamenti in una lista non ordinata. La maggior parte dei menu mostrano più collegamenti di due. Aggiungere il maggior numero di collegamenti che vuoi tenendo a mente che se si aggiunge troppi, il menu si romperà. Quante è possibile includere dipende dalla larghezza del disegno, la larghezza del menu e la larghezza schermo dell'utente.
2 Rimuovere proiettili, margini e padding dalla lista non ordinata. A tale scopo, l'impostazione delle proprietà CSS, sia in un file CSS esterno o tra i tag <style> e </ style>.
ul {list-style: none; margin-left: 0; padding-left: 0;}
Il codice di cui sopra rimuove la formattazione dalla lista non ordinata in modo da poter stile come un menu.
3 Allineare tutte le voci del menu a sinistra di ogni altra impostando la proprietà "float" a "sinistra" per ogni tag <li> nella lista non ordinata. Questo è il modo in cui il codice CSS appare:
li {float: left;}
Questo codice ti dà una linea retta di collegamenti. Si dovrebbe stile i link se stessi invece delle voci di elenco, ma l'impostazione "galleggiare" per le voci di elenco invece dei collegamenti impedisce "passo" in alcuni browser. "Potenziamento" è un errore se l'elenco dei link appare come una serie di passi invece di fila in linea retta, orizzontale.
4 Aggiungere imbottitura per ogni anello CSS in questo modo:
li a {padding: 5px 10px; blocco di visualizzazione;}
Nel codice sopra, ogni collegamento ha una imbottitura di cinque pixel sulla parte superiore e inferiore e 10 pixel a sinistra ea destra. Applicando imbottitura per i link crea una più grande area cliccabile attorno al testo di ogni collegamento. Impostare "display: block;" per rendere i browser trattano i link come blocchi. Si noti che il selettore CSS qui è "li a" invece di "un", perché non si vuole ogni link sulla pagina a guardare come i collegamenti nel menu.