August 20
Gli sviluppatori web front-end utilizzano le liste non ordinate per fornire la struttura per tutta una serie di diversi trucchi di pagine Web e gli effetti che vanno da semplici elenchi puntati al complicato menu a discesa e cursori di immagine. Ogni aspirante web designer o sviluppatore deve imparare le basi di styling liste non ordinate utilizzando il codice CSS. Per creare una scala, la lista orizzontale di oggetti in CSS, ad esempio, è necessario sapere come assegnare galleggianti, padding e margini.
1 Digitare il testo per la vostra lista non ordinata nel file HTML della pagina Web. Mettere ogni elemento della lista su una riga per facilitare la lettura e la modifica del codice. Avvolgere ogni elemento della lista in apertura e chiusura <li> tag. Si dovrebbe sempre chiudere questi tag per lo styling e l'editing più facile in seguito. Questa è una voce esempio lista:
<Li> Questo è un testo che costituisce un elemento della lista. </ Li>
2 Aggiungere una nuova riga sopra le voci di elenco e digitate il tag <ul> lì. Aggiungere una nuova riga sotto l'elenco e digitare la chiusura </ ul> tag. All'interno del tag <ul>, impostare l'attributo ID di un nome univoco e significativo. Si utilizzerà l'ID nel codice CSS. Ecco un esempio del tag <ul> in uso:
<Ul id = "dritto">
<Li> elemento lista 1 </ li>
<Li> elemento lista 2 </ li>
</ Ul>
3 Aprire il file .CSS per il tuo sito o aggiungere apertura e chiusura <style> tag tra i tag <head> tag del file HTML. Digitare il codice CSS nel file .CSS o tra i tag <style>. Impostare la proprietà "float" del tag <li> a "sinistra" in modo che ogni elemento della lista galleggia contro il bordo sinistro l'ultimo. Ecco il codice CSS:
dritto li {float: left;}
Si noti che "#straight" seleziona il <li> tag all'interno di ogni tag dato un ID di "diritto".
4 Aggiungere margini e padding ai tag <li> Nella CSS per lo spazio di ogni elemento della lista, in questo modo:
Li dritto {float: left; margin-right: 10px; margin-left: 10px; padding: 5px;}
Stile i tag <li> comunque lo si voglia, dando gli elementi propri sfondi, i colori del testo e gli stili dei caratteri a seconda delle necessità. È inoltre possibile rimuovere lista proiettili impostando "list-style" a "none".