Mentre la proprietà "list-style-type" nel codice di Cascading Style Sheet (CSS) ti offre alcune opzioni di stile di punto elenco, a volte progetti Web richiedono proiettili personalizzati basati su immagine. Il metodo migliore per impostare un'immagine come punto elenco per gli elenchi di proiettile..--noto anche come "elenchi non ordinati" in HTML..--comporta l'uso di esso come immagine di sfondo. Di ogni elemento dell'elenco e quindi aggiungere imbottitura per posizionare il testo al lato dell'immagine. Questo funziona bene in tutti i browser e ti permette di controllare meglio la posizione del proiettile.

Istruzioni

1

Se avete già installato uno, utilizzare un editor di codice. In caso contrario, andare su "Start". Immettere "Blocco note" nella casella di ricerca. Selezionare "File" nel menu in alto e aprire il tuo file CSS.

2

Aggiungere il codice riportato di seguito alla parte inferiore del vostro file CSS:

UL {

list-style: none;

}

3

Scrivere codice destinato gli elementi dell'elenco all'interno della tua lista di proiettile per il punto elenco immagine come sfondo:

li {

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

}

Questo codice imposta il punto elenco immagine come sfondo per ogni elemento dell'elenco mentre dice il browser non per affiancare l'immagine. Impostare il suo posizionamento come "centro sinistra" quindi l'immagine viene posizionata a sinistra del testo e verticalmente centrato.

4

Aggiungere spaziatura interna sul lato sinistro di ogni voce di elenco:

li {

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

padding-left: 20px;

}

Impostare sinistra imbottitura su un valore uguale alla larghezza del punto elenco immagine in pixel, più alcuni pixel aggiuntivi per aggiunto spaziatura tra il proiettile e il testo.

Consigli & Avvertenze

• Assegnare il tag "< ul >" un nome di classe come "< ul classe = 'stelle' >" e gli elementi dell'elenco di destinazione come "Divo li" nel tuo CSS per aggiungere i punti elenco immagine a determinati elenchi e non gli altri.
• Backup dei file HTML e CSS prima di modificarli.