Les listes permettent d'organiser et structurer l'information sur une page web. Elles sont utilisées partout : menus de navigation, énumérations, instructions étape par étape, chronologies...
Sans listes, le contenu serait désordonné et difficile à lire. Avec les listes, vous pouvez créer des présentations claires et élégantes !
<ul>)Pour des éléments sans ordre particulier.
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
<ol>)Pour des éléments qui suivent un ordre précis.
<ol>
<li>Première étape</li>
<li>Deuxième étape</li>
<li>Troisième étape</li>
</ol>
Par défaut, les listes affichent des puces (•) ou des numéros. Vous pouvez les supprimer avec CSS :
<!DOCTYPE html>
<html>
<head>
<title>Liste sans puces</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="sans-puces">
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</body>
</html>
list-style-type: none; supprime les puces, et padding: 0; enlève le décalage à gauche.Voici comment transformer une liste simple en chronologie moderne :
<!DOCTYPE html>
<html>
<head>
<title>Chronologie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="chronologie">
<li>
<strong>2010</strong>
Lancement du projet
</li>
<li>
<strong>2015</strong>
Première version publique
</li>
<li>
<strong>2024</strong>
Version actuelle
</li>
</ul>
</body>
</html>
<ul>
<li><strong>2010</strong> Lancement du projet</li>
<li><strong>2015</strong> Première version publique</li>
<li><strong>2024</strong> Version actuelle</li>
</ul>
.chronologie li {
background-color: #f0f0f0;
padding: 15px;
border-left: 4px solid #3498db;
border-radius: 5px;
}
| Propriété | Description | Exemple |
|---|---|---|
list-style-type | Change le type de puce | none, circle, square |
padding | Espacement intérieur | padding: 10px; |
margin | Espacement extérieur | margin-bottom: 15px; |
background-color | Couleur de fond | background-color: #f0f0f0; |
border-left | Bordure à gauche | border-left: 3px solid blue; |
border-radius | Coins arrondis | border-radius: 5px; |
Les listes sont parfaites pour créer des menus :
<!DOCTYPE html>
<html>
<head>
<title>Menu de navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
list-style-type: none;padding et margin pour espacer vos éléments de manière harmonieuseborder-left) pour créer un effet moderneborder-radius pour arrondir les coins de vos éléments:hover pour rendre vos listes interactives