Una piccola lezione per te che sei alle prime armi e magari vuoi migliorare l’appeal grafico del tuo elenco. Tramite i css puoi formattare graficamente come credi la tua lista di elementi. Vediamo insieme come farlo.
Appurato e assodato che una lista di elementi si scrive nel codice NON in questo modo:
<p style="padding-left: 20px;"><img src="http://www.laurynlabs.it/wp-content/uploads/2014/10/punto.png" alt="punto" width="10" height="10" /> Testo dell'elemento...</p>
Ma tramite il codice html che evidenzia la lista:
<ul> <li>Testo dell'elemento....</li> </ul>
E scrivere poi invece nel css la regola:
li {
padding-left: 20px; background: transparent url('http://www.laurynlabs.it/wp-content/uploads/2014/10/punto.png') no-repeat 0 0;
list-style: none; /* questo serve per togliere gli stili di default */
}
Sostituisci all’immagine quella che desideri, aggiusta un po’ il padding e via! Ecco una lista formattata a dovere.
Non devo spiegarti perché non si usa il paragrafo vero? E nemmeno perché si usano i css invece che le immagini in linea, isn’t it right?
Luca Centi Pizzutilli
16 Ottobre 2014Luca Centi Pizzutilli liked this on Facebook.
Laura Gargiulo
16 Ottobre 2014Laura Gargiulo liked this on Facebook.
lauryn77
20 Ottobre 2014Come si formatta graficamente una lista http://t.co/WDVNUXqRj1 #css2 #liste