Médiaforma

Donnez du style à vos listes

Print Friendly

Cette rubrique va vous montrer comment modifier le style des puces dans une liste <ul>. Dans cet exemple, nous avons utilisé une liste pour énumérer les Etats membres de l’Union Européenne :

La balise <ul> marque le début de la liste et la balise </ul> marque la fin de la liste. Les divers éléments de la liste sont délimités par les balises <li> et </li>. Voici le résultat :

Dans une rubrique précédente, vous avez vu comment utiliser d’autres types de liste en utilisant l’attribut type. Consultez la rubrique Listes à puces pour en savoir plus à ce sujet.

Dans cette rubrique, je vais vous montrer comment remplacer les puces prédéfinies du langage HTML par des images. Pour cela, vous allez utiliser la propriété CSS list-style et lui affecter une image. Ici par exemple, l’image utilisée a pour nom puce3D2.jpg. Si l’image n’est pas disponible, vous pouvez préciser le nom de la puce prédéfinie à utiliser : disc, square ou circle.

Voici le résultat quand l’image est trouvée, et quand l’image n’est pas disponible :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply