Tag di elenco HTML non sembrano a prima vista, emozionante. Il loro scopo originale era quello di creare puntati o elenchi numerati. Quando Cascading Style Sheets (CSS) è diventato prevalente, sviluppatori esperti ha iniziato a pubblicare articoli su come trasformare questi elenchi in menu complicati e programmatori ha partecipato in coppia con l'altro per inventare nuove tecniche. Ora gli sviluppatori utilizzare elenchi tag per strutturare qualsiasi elenco del contenuto, inclusi i collegamenti all'interno di menu. Essi utilizzare CSS per gli elenchi di stile. Con una poca conoscenza CSS e alcuni esperimenti, è possibile replicare alcune delle loro tecniche.

Istruzioni

1

Utilizzare questo codice in CSS per modificare la modalità di visualizzazione di un elenco non ordinato nelle pagine:

UL {

stile elenco: disco;

colore di sfondo: colorname;

}

Sostituire "ul" con "ol" per modificare un elenco ordinato invece. Modificare "colorname" con il nome di un colore web-safe o il valore esadecimale di qualsiasi colore. Ogni riga tra le parentesi graffe è una proprietà e il suo ambiente. Includere solo le proprietà che si desidera modificare.

2

Utilizzare il seguente codice CSS per modificare la modalità di visualizzazione di testo all'interno di tag < li >:

li {

font-family: "Nome Font";

colore: colorname;

colore di sfondo: colorname;

font-style: italic;

font-weight: bold;

}

Sostituire "Nome Font" con il nome di un font che si desidera utilizzare e sostituire "colorname" con il nome di un colore web-safe o il codice esadecimale per qualsiasi colore.

3

Impostare la proprietà di "list-style" su "none" per il tag < ul > a striscia via proiettili. Rimuovere l'imbottitura e il margine sul lato sinistro del tag < ul > sbarazzarsi delle rientranze, a meno che non si desidera tenerli. Il codice è simile al seguente:

UL {

list-style: none;

padding-left: nessuno;

margine sinistro: nessuno;

}

4

Aggiungere i punti elenco immagine dando il tag < li > ogni uno sfondo e alcuni imbottitura. Questo è il metodo più comune per la sostituzione di pallottole stile regolare "disco". Ecco il codice:

li {

immagine di sfondo: URL(path/to/image.png) centro a sinistra no-repeat;

padding-left: 20px;

}

Modificare il percorso tra le parentesi il percorso del file immagine. Utilizzare il "centro e sinistra" per inserire l'immagine di sfondo sul lato sinistro e dargli un allineamento verticale centrato. È inoltre possibile utilizzare "left top" a metterlo nell'angolo superiore sinistro. Modificare "padding-left" per la quantità di pixel che è necessario spostare il testo dell'elemento elenco in modo che non si sovrappone l'immagine punto elenco.

5

Trasformare il vostro elenco HTML in un menu verticale rimuovendo i proiettili, margini e spaziatura interna predefinita. Impostare ogni tag < li > "galleggiante: sinistra" così ogni elemento viene visualizzato side-by-side. Dare imbottitura ai tag < a > per renderli più facili da scegliere. Utilizzare codice simile al seguente:

UL {padding-left: none; padding-right: none; list-style: none;}

li {float: left;}

li una {padding: 10px;}

Stile del tag < ul > per dare il menu uno sfondo e poi lo stile i tag < a > con effetti al passaggio del mouse e così via per creare un menu di funzionamento.

Consigli & Avvertenze

• Codice CSS posto tra < style > e < / stile > Tag della tua pagina se non utilizza un esterno. File CSS. Il tag < style > andare tra < head > e < / head > Tag nella parte superiore di un file HTML.