Utilizzare gli elenchi per fare punti passi rapidi e numeri in ordine, o creare un menu per il sito.

istruzione

Modificare o rimuovere la lista marcatori

1 La proprietà CSS list-style-type viene utilizzato per determinare il tipo di marcatore un elenco utilizza o per rimuovere completamente i marcatori dalla lista. I valori possibili per list-style-type includono: disco, cerchio, quadrato, decimale, superiore-alfa, lower-alpha, superiore-romana, bassa-romana e nessuno.

2 Se si desidera che l'elenco per visualizzare con numeri romani in maiuscolo, ad esempio, la regola CSS sarebbe:

ol {
list-style-type: alto-romana;
}

Per altri tipi di marcatori, è sufficiente modificare il valore dato alla proprietà per il tipo di marcatore che si desidera.

3 Se si voleva marcatori della lista a tutti, la regola CSS sarebbe

ol {
list-style-type: none;
}

Per una lista non ordinata, sarebbe:

ul {
list-style-type: none;
}

4 Per cambiare il marcatore lista a un'immagine, utilizzare la proprietà list-style-image. Ad esempio, si supponga di voler utilizzare una piccola grafica di una stella come marcatore voce di elenco. Ecco un esempio di come dare l'URL della grafica.

ul {
list-style-image: url (star.gif);
}

Visualizzare l'elenco orizzontalmente

5 La proprietà CSS che farà la visualizzazione della lista attraverso una pagina è orizzontale del display. Il valore per la visualizzazione che si desidera utilizzare per creare elenchi orizzontali è display: inline.

6

Inizia con una lista non ordinata ordinario. Applicare questa regola CSS esempio

li {
list-style-type: none;
display: inline;
}

L'immagine mostra ciò che questo CSS farà per un normale elenco puntato non ordinata.

7 L'elenco deve styling aggiuntivi, forse bordi e padding, ma la base della tecnica è riportata nella Fase 2.

Vedere la sezione successiva per suggerimenti su come per lo stile della lista se contiene i collegamenti.

Lo stile di un elenco come un menu

8 In questa sezione vedremo una barra dei menu verticale o barra di navigazione. Non vi è alcuna necessità di immagini nella barra di navigazione, solo CSS.

9 Una lista non ordinata viene normalmente utilizzato come un menu. Ogni elemento della lista contiene un elemento A per creare un collegamento. Una parte del CSS si applica alla lista, parte ai collegamenti.

10 Inizia rimuovendo i marcatori della lista. Solo per mantenere l'esempio da riempire una pagina intera, aggiungerò una larghezza, troppo. Per esempio,

ul {
list-style-type: none;
width: 200px;
}

11 Non è necessario, ma io aggiungere un bordo nero solido per l'esempio. Questo renderà il look lista in scatola e più simile a una barra di navigazione. Ecco il CSS.

li {
border: 1px solid # 000;
}

12 Questo rende l'aspetto lista come una barra dei menu, ma l'unica parte di un utente può fare clic su è la parola effettiva la voce di elenco. È possibile effettuare l'intera scatola nella zona cliccabile con l'aggiunta di una regola CSS per i collegamenti.

13


Utilizzare il discendente selettore di li a. Questo selezionerà i link che fanno parte della vostra lista. Ecco il CSS:

li a {
blocco di visualizzazione;
}

Il display: block regola rende l'intero elemento della lista si comporta come un link e tutto diventa cliccabile. Potete vedere il dito puntato nell'immagine, dimostrando che ovunque all'interno della scatola può essere cliccato per controllare il menu.

Consigli e avvertenze

• Vi è anche una proprietà list-style-position CSS che possono avere i valori all'interno, all'esterno o ereditare. Utilizzare list-style-position per determinare se l'elenco visualizzato sia all'interno che all'esterno del marcatore di lista.
• Utilizzare i margini, i colori imbottitura e di sfondo o immagini per vestire la lista.
• È possibile rendere il colore di sfondo (o immagine) di ciascuna lista variazione della voce quando l'utente passa sopra con una regola CSS per il selettore li a: hover.