简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Styles de liste HTML

Styles de liste HTML

PHPz
PHPzoriginal
2024-09-04 16:16:13756parcourir
  • Les listes sont l'exigence courante de placer les données de manière formatée, comme si vous avez créé une page Web sur laquelle vous devez afficher le contenu du menu de pizza d'un hôtel, il s'agira probablement d'un style de liste HTML qui devra apparaître de manière claire et discrète.
  • D'autres cas peuvent être ceux où vous avez un ensemble de rangs d'étudiants qui figuraient parmi les plus performants de la classe ; dans ce contexte, l'exigence sera de placer l'étudiant de rang 1 en haut et les autres en dessous par ordre croissant de classement, pour cela nous devons formater cela dans une liste triée.
  • Un autre type peut être constitué de listes personnalisées que vous pouvez créer en utilisant Javascript et HTML ensemble, où la dynamique des objets peut également être configurée, et les listes peuvent adopter des perspectives personnalisées.

Différents styles de liste en HTML

Vous trouverez ci-dessous les différents styles de liste HTML expliqués.

1) Listes non ordonnées

Ici, l'ordre d'affichage du contenu n'est pas quelque chose dont nous devons nous soucier ; nous devons juste bien placer les éléments, de sorte que la page HTML les place devant l'utilisateur de manière bien formatée et claire.

Il existe deux balises en langage HTML qui gèrent ces listes, et vous pouvez probablement créer une barre de navigation et une barre latérale verticale en utilisant uniquement ces balises.

    1.  : ceci représente la liste non ordonnée ; chaque fois que nous n'avons pas besoin de classer quoi que ce soit ou de chercher à le placer dans un ordre aléatoire, cette balise est incorporée.
    • : cela représente les éléments de la liste, l'ensemble des éléments à placer dans la liste non ordonnée, c'est-à-dire sous le
        apparaissent à l'intérieur de la balise
      • étiqueter. Les éléments marqués avec ces balises porteront automatiquement des puces ou des cercles à leur début ; ce sont les fonctionnalités HTML de base.

Voyons maintenant un morceau de code pour

    et
  • listes non ordonnées basées et à quoi ressemblera la page HTML ; une fois que vous avez exécuté ce fichier, notez que vous pouvez écrire dans un éditeur comme le bloc-notes et enregistrer le fichier avec l'extension « .html » ; il peut donc être ouvert avec n'importe quel navigateur.

    Exemple d'extrait –

    Code :

    <html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>

    Sortie :

    Styles de liste HTML

    2) Listes ordonnées

    Nous allons maintenant voir un cas où nous cherchons à placer les étudiants de manière ordonnée en fonction de leur rang en classe, et cela apparaîtra de manière triée en utilisant le paramètre

      balise HTML, et elle contiendra plusieurs balises
    1. balises, celles-ci contiendront les éléments de la liste.

         : cette balise permet de constituer une liste ordonnée, et tous les éléments sont placés à l'intérieur, dans
      1. balises.
      2. la balise a été expliquée ci-dessus.

        Pour ce cas, voyons également un exemple, et vous devez l'enregistrer comme ci-dessus.

        Code :

        <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

        Sortie/Page HTML

        Styles de liste HTML

        Voyons maintenant quelques variantes de celles-ci où nous pouvons personnaliser ou bien formater ces listes uniquement en ajoutant quelques propriétés CSS dans la page HTML, ce qui améliorera l'apparence de la page.

        1. Dans les listes non ordonnées, nous avons les propriétés suivantes qui peuvent être données –
        2. Type de style de liste – peut être un disque, un cercle, un carré ou aucun. Ainsi, les cercles que vous avez vus dans les éléments de liste non ordonnés n'apparaîtront pas si nous n'en choisissons aucun ici, faisons-le.

        Exemple –

        Code :

        <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>

        Sortie/Page HTML –

        Styles de liste HTML

        Donc, les puces circulaires n'existent plus ; vous pouvez les personnaliser avec les options fournies ci-dessus.

        De même, il existe une possibilité de choisir si les valeurs de la liste de commande apparaîtront avec des chiffres, des chiffres romains ou des alphabets dans les listes de commande.

        Vous pouvez définir le type de propriété dans

          balise pour le même, et le type peut prendre les valeurs suivantes.

          Type : « 1 », « A », « a », « I », « i. »

          Voyons un exemple de code pour le même –

          Code :

          <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "i">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

          Sortie/Page HTML –

          Styles de liste HTML

          De même, nous avons également des listes de descriptions où nous pouvons définir l'élément sur lequel nous devons placer une description ; disons que vous créez une page sur laquelle vous devez placer des définitions par rapport à certains mots-clés, vous pouvez alors choisir les listes de descriptions.

          Balises

          Nous avons les balises suivantes pour gérer la même chose.

           – cette balise définit la liste de description

          – cette balise donnera le terme de description

          – this tag carries the description of each term

          Example –

          Code:

          <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<dl>
<dt style="color:red"> Docker </dt>
<dd> -: this is used to make environment portable application containers </dd>
<br>
<dt style="color:green"> Kubernetes </dt>
<dd> -: this is an orchestrator for those containers make by docker </dd>
</dl>
</body>
</html>

          Output/HTML page –

          Styles de liste HTML

          You can also define the start property in the ordered lists in

            tag, which tells from where the count starts. Let’s see an example of the same –

            Code:

            <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "1" start="10">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</>
</body>
</html>

            Output:

            Styles de liste HTML

            Conclusion

            So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

            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!

JavaScript css bootstrap html Static define if count for format using class Property JS this display ul li outlook
Déclaration：
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
Article précédent：Entités HTMLArticle suivant：Entités HTML

Articles Liés

Voir plus