Maison > Article > interface Web > Comment créer une liste non ordonnée avec des symboles d'image en HTML ?
Comment créer une liste non ordonnée avec des symboles d'image en HTML ?
- WBOYavant
- 2023-09-06 15:49:151655parcourir
Les listes ordonnées sont numérotées, les listes non ordonnées ne sont pas numérotées, elles peuvent être créées à l'aide de balises
CD - Cela créera une liste non ordonnée marquée de puces (par défaut).
Cercles - Cela créera une liste non ordonnée intitulée cercles.
square - Cela créera une liste non ordonnée intitulée square.
-
Aucun - Cela créera une liste non ordonnée sans aucune balise.
Grammaire
Voici la syntaxe pour créer une liste non ordonnée avec des puces carrées en HTML.
<ul style="list-style-image: url(image.png)"> <li>Item in list…</li> <li>Item in list…</li> <li>Item in list…</li> </ul>
Exemple 1
Vous trouverez ci-dessous un exemple de création d'une liste non ordonnée avec des puces d'image en HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul style="list-style-image: url(images/11.png)">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
</ul>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
Exemple 2
Voyons un autre exemple de création d'une liste non ordonnée à l'aide de puces d'image -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>Tutorials</h2>
<p>The list of tutorials:</p>
<ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ul>
</body>
</html>
Après avoir exécuté le code ci-dessus, le résultat est le suivant -
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!