Maison > interface Web > tutoriel HTML > le corps du texte

Comment créer une liste non ordonnée avec des symboles d'image en HTML ?

WBOY
Libérer: 2023-09-06 15:49:15
avant
1666 Les gens l'ont consulté

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

    et les balises
  • sont utilisées pour définir les éléments de la liste. Nous pouvons créer 4 types de listes non ordonnées en HTML -
    • 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.

      Comment créer une liste non ordonnée avec des symboles dimage en HTML ?

    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>
    
    Copier après la connexion

    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>
    
    Copier après la connexion

    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>
    
    Copier après la connexion

    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!

  • source:tutorialspoint.com
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal