Come si formatta graficamente una lista

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:

punto Testo dell'elemento...

Ma tramite il codice html che evidenzia la lista:

  • Testo dell'elemento....

E scrivere poi invece nel css la regola:

li {
    padding-left: 20px;
    background: transparent url('https://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?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

%d blogger hanno fatto clic su Mi Piace per questo: