April 10
Mentre la proprietà "list-style-type" in Cascading Style Sheet codice (CSS) fornisce alcune opzioni di stile proiettile, a volte disegni di Web richiedono proiettili su misura-image-based. Il metodo migliore per impostare un'immagine come un proiettile per le liste di proiettile - noto anche come "le liste non ordinate" in HTML - comporta l'uso come immagine di sfondo. Farlo in ogni elemento dell'elenco e quindi aggiungere imbottitura per posizionare il testo al lato dell'immagine. Questo metodo funziona bene in tutti i browser e consente un migliore controllo della posizione del proiettile.
1 Utilizzare un editor di codice, se ne avete già uno installato. In caso contrario, andare a "Start". Inserisci "Blocco note" nella casella di ricerca. Passare a "File" nel menu in alto e aprire il file CSS.
2 Aggiungere il seguente codice al fine del file CSS:
ul {
list-style: none;
}
3 Scrivere il codice di mira le voci di elenco all'interno della vostra lista proiettile per aggiungere il proiettile immagine come sfondo:
li {
background-image: URL ( 'path / to / bullet.png') no-repeat centro sinistra;
}
Questo codice imposta il proiettile immagine come sfondo per ogni elemento della lista, mentre dice al browser di non affiancare l'immagine. Impostare il posizionamento come "centro sinistra" così l'immagine è posizionata alla sinistra del testo e verticalmente centrato.
4 Aggiungere imbottitura sul lato sinistro di ogni elemento della lista:
li {
background-image: URL ( 'path / to / bullet.png') no-repeat centro sinistra;
padding-left: 20px;
}
Impostare l'imbottitura sinistra per un valore pari alla larghezza del proiettile in pixel, più alcuni pixel aggiuntivi per la spaziatura aggiunto tra il proiettile e il testo.