Styles de liste HTML-tutoriel HTML-php.cn

Styles de liste HTML

PHPz

Libérer： 2024-09-04 16:16:13

original

606 Les gens l'ont consulté

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.

- : 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
  - é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

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

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
1. balises, celles-ci contiendront les éléments de la liste.
  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>
```
    Copier après la connexion
    Sortie/Page 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>
```
    Copier après la connexion
    Sortie/Page 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