Un tocco di stile a liste e titoli - Esempi

Lista semplice con marcatore quadrato

• Grafica
• Motori di ricerca
• Web Design

Il codice

ul#semplice {
font-size: 12px;
list-style: square;
line-height: 1.5;
}

Lista semplice con marcatore a immagine

• Grafica
• Motori di ricerca
• Web Design

Il codice

ul#bullet1 {
font-size: 12px;
line-height: 1.5;
list-style: square url(listmark.gif);
}

Lista semplice con marcatore a immagine (2)

• Grafica
• Motori di ricerca
• Web Design

Il codice

ul#bullet2 {
font-size: 12px;
line-height: 1.5;
list-style: url(motori_20.gif);
}

Lista semplice con marcatore dichiarato nel background

• Grafica
• Motori di ricerca
• Web Design

Il codice

ul#bullet3 {
font-size: 12px;
line-height: 1.5;
}
ul#bullet3 li {
list-style-type: none;
padding: 0 0 5px 25px;
background: url(motori_20.gif) no-repeat 0px 0px;
}

Titolo con marcatore

Un esempio di titolo con marcatore

Il codice

h2#titolo {
font-size: 20px;
padding: 0 0 5px 25px;
background: url(grafica_20.gif) no-repeat 0px 2px;
}