Webinventif

Aujourd'hui je vais vous montrer comment rendre encore plus agréable à l'oeil vos listes HTML !

Ce tutoriel n'a pas de but particulier à part celui de faire plaisir à vos visiteurs lorsqu'ils tomberont sur vos listes trop fashion ^^ ! De plus il est extrêmement simple à mettre en œuvre. 😉

Le principe

Une liste ordonnée est difficile à personnaliser parce qu'on a pas directement accès à l'habillage des numéros. Du coup pour les personnaliser, on doit appliquer le style sur la liste dans son entièreté ! Ce qui n'est pas vraiment pratique si l'on ne désire pas changer le style du reste du texte.
Donc la technique consiste à englober le contenu de chaque élément "li" dans une autre balise, comme ça nous pourrons annuler les effets css appliquer sur le liste uniquement pour le contenu "texte" !

Voir la démo ....

1er exemple

Code html:

Style CSS:

2ème exemple

Code html:

Style CSS:

3ème exemple

Code html:

Style CSS:

4ème exemple

Code html:

Style CSS:

Le 3ème exemple est celui que j'utilise pour mes brève de liens 😉

Conclusions

Vraiment de rien sorcier, à vous de trouver votre style 😉