Une liste à puces est définie en ajoutant une petite puce devant chaque élément de la liste, généralement un cercle plein. La liste elle-même est formée à l'aide d'un conteneur
- , et chaque élément de la liste commence par une balise
- comme indiqué ci-dessous.
- Premier point
- Deuxième point
- Troisième point
La balise de fin doit être présente dans la liste.
L'exemple 11.1 fournit du HTML pour ajouter une liste à puces à une page Web.
Exemple 11.1. Créer une liste à puces
- Cheburashka
- Crocodile Géna
- Shapoklyak
- Rat Larissa
Résultat cet exemple montré dans la fig. 11.1.
Riz. 11.1. Vue liste à puces
Remarquez le remplissage en haut, en bas et à gauche de la liste. Ces retraits sont ajoutés automatiquement.
Les marqueurs peuvent être de trois types : cercle (par défaut), cercle et carré. L'attribut type de la balise est utilisé pour sélectionner le style du marqueur.
- ... Les valeurs admissibles sont données dans le tableau. 11.1
- D'abord
- Seconde
- Troisième
- D'abord
- Seconde
- Troisième
- D'abord
- Seconde
- Troisième
- changement de croyance religieuse (facultatif : bouddhisme, confucianisme, hindouisme). Offre spéciale - judaïsme et islam ensemble ;
- un changement de croyance en l'infaillibilité du bien-aimé ;
- la croyance que les extraterrestres existent;
- préférence pour le système politique comme le meilleur de son genre (optionnel : féodalisme, socialisme, communisme, capitalisme).
- premier élément
- deuxième élément
- dernier élément
- Département commercial
- Ce département est engagé dans la promotion des biens et services
- Département financier
- Ce département s'occupe de toutes les transactions financières
- NOUVELLES DU JOUR
-
- Aujourd'hui la pluie
- Il pleuvra toute la journée
- NOUVELLES DE LA NUIT
- Il pleuvra la nuit
- Demain un nouveau jour commencera
- Badminton
- Base-ball
- Chomolungma
- Chogori
- Kanchenjunga
- Chute du sommet
- Ruelle de colère
- Insano
- mer des Philippines
- Mer d'Oman
- Mer de Corail
- rouge
- Vert
- Bleu
- Chiffres arabes (1, 2, 3, ...);
- Chiffres arabes avec zéro non significatif pour les chiffres inférieurs à dix (01, 02, 03, ..., 10);
- lettres latines majuscules (A, B, C, ...);
- lettres latines minuscules (a, b, c, ...);
- chiffres romains majuscules (I, II, III, ...);
- chiffres romains minuscules (i, ii, iii, ...);
- numérotation arménienne;
- Numérotation géorgienne.
- ... Tout entier positif peut être spécifié comme valeur. Peu importe le type de numérotation défini, même si des lettres latines sont utilisées comme liste. Si les attributs de début et de valeur sont appliqués à la liste en même temps, alors ce dernier est prioritaire et la numérotation est affichée à partir du nombre spécifié par valeur, comme illustré dans l'exemple 1.
Exemple 1. Renumérotation d'une liste
Listes - Vous devez prendre grand soin de votre lieu de travail.
- Réglez l'éclairage de la pièce de manière à ce que la source lumineuse soit sur le côté ou derrière l'opérateur.
- Pour éviter les complications médicales, il est recommandé de choisir une chaise avec une assise moelleuse.
Le premier élément de la liste dans cet exemple commencera par le chiffre romain IV, puisque l'attribut start = "4" est spécifié, puis le numéro V suit, et le dernier élément suit dans le désordre et reçoit le numéro X (Fig. . 1).
Riz. 1. Chiffres romains dans la liste
Écrire des nombres
Par défaut, une liste numérotée a une certaine forme : il y a d'abord un nombre, puis un point, puis le texte est affiché à travers un espace. Cette forme d'écriture est claire et pratique, mais certains développeurs préfèrent voir une manière différente de formater la numérotation des listes. A savoir, au lieu d'un point, il y a une parenthèse fermante, comme le montre la Fig. 2 ou quelque chose de similaire.
Riz. 2. Vue d'une liste numérotée avec une parenthèse
Les styles vous permettent de modifier la façon dont les listes sont renumérotées à l'aide des propriétés de contenu et de contre-incrément. Tout d'abord, vous devez définir counter-reset : élément pour le sélecteur ol, cela est nécessaire pour que la numérotation dans chaque nouvelle liste recommence. Sinon, la numérotation continuera et au lieu de 1,2,3 vous verrez 5,6,7. La valeur de l'article est un identifiant de compteur unique, nous le choisissons nous-mêmes. Ensuite, vous devez masquer les marqueurs d'origine via la propriété de style list-style-type avec la valeur none.
La propriété content fonctionne généralement en conjonction avec les pseudo-éléments :: après et :: avant. Ainsi, le li :: avant la construction indique qu'un certain contenu doit être ajouté avant chaque élément de la liste (exemple 2).
Exemple 2. Création de votre propre numérotation
Li :: avant (contenu : compteur (élément) ")" ; / * Ajouter des parenthèses aux nombres * / counter-increment : item; / * Définir le nom du compteur * /)
La propriété content avec le compteur de valeur (item) renvoie un nombre ; en ajoutant une parenthèse comme indiqué dans cet exemple, nous obtenons la numérotation requise. un contre-incrément est nécessaire pour incrémenter le numéro de la liste de un. Notez que le même identifiant appelé item est utilisé partout. Le code final est montré dans l'exemple 3.
Exemple 3. Modification de la vue d'une liste
Listes - D'abord
- Seconde
- Troisième
- Quatrième
De cette façon, vous pouvez faire n'importe quel type de liste numérotée, par exemple, prendre un nombre entre crochets, dans ce cas une seule ligne changera de style.
Contenu : "[" compteur (élément) "]" ;
Liste avec des lettres russes
Il y a une liste numérotée avec avec des lettres latines, mais il n'y a pas de lettres russes pour la liste. Ils peuvent être ajoutés artificiellement en utilisant la technique ci-dessus. Comme la numérotation se fait par styles, la liste elle-même reste originale, seule la classe sélectionnée y est ajoutée, appelons-la cyrilique (exemple 4).
Exemple 4. Code pour créer une liste
- Une
- Deux
- Trois
L'ajout de lettres se fait à l'aide du pseudo-élément :: avant et de la propriété content. Puisque chaque ligne doit avoir sa propre lettre, nous utiliserons la pseudo-classe : nième-enfant (1), le numéro de la lettre est écrit entre parenthèses. La première lettre, bien sûr, est A, la seconde est B, la troisième est C, et ainsi de suite. Cet ensemble complet est ajouté au sélecteur li comme suit (exemple 5).
Exemple 5. Utilisation de la pseudo-classe : nth-child
cyrillique li : nième-enfant (1) :: avant (contenu : "a)" ; ) .cyrilic li: nième-enfant (2) :: avant (contenu : "b)" ; ) .cyrilic li: nième-enfant (3) :: avant (contenu : "dans)" ; )
Dans cet exemple, chaque lettre est suivie d'une parenthèse, toutes en minuscules. Vous pouvez définir votre propre type de numérotation de liste, par exemple, elle peut contenir des lettres majuscules avec un point, avec une ou deux parenthèses, ou uniquement des lettres. Contrairement à la numérotation standard, nous sommes libres de faire ce que nous voulons ici. Une liste de dix lettres devrait suffire pour presque toutes les situations, mais si cela s'avère soudainement insuffisant, rien ne nous empêche d'élargir notre liste pour inclure au moins toutes les lettres de l'alphabet russe.
Enfin, nous ajustons l'alignement et la position des lettres, si vous le souhaitez, spécifions la taille de la police, la couleur et d'autres paramètres (exemple 6).
Exemple 6. Liste avec des lettres russes
Lister - Bortsch
- Escalopes de brochet
- Kulebyaka
- Champignons à la crème sure
- Crêpes au caviar
- Kvass
Le résultat de cet exemple est montré dans la Fig. 3.
Bonjour chers lecteurs ! Aujourd'hui, dans le prolongement de la série d'articles sous le titre "Bases du html", je souhaite vous familiariser avec l'algorithme de création listes html Avec de l'aide balises ul et li (liste non ordonnée), ol et li (liste numérotée), dl, dt, dd (liste de définitions).
Maintenant, je vais continuer à vous familiariser avec les plus fréquemment utilisés balises html, qui sont utilisés pour créer des listes sur les pages du site. Si quelqu'un ne sait pas de quoi il s'agit, c'est sûr, après les informations reçues ci-dessous, il comprendra immédiatement de quoi il s'agit, car cette forme de présentation du matériel est très courante.
Listes à puces HTML - balises ul et li
La liste à puces est définie par la balise ul. Les éléments de liste sont situés entre les balises ul d'ouverture et de fermeture, dont le contenu doit à son tour être situé entre les balises li d'ouverture et de fermeture. Tout de suite, je constate que la balise ul est appariée (présence d'une balise ouvrante et fermante), ainsi que block, c'est-à-dire qu'elle forme un conteneur qui contient des éléments (chaînes) qui sont formés à chaque fois par la balise li. En conséquence, la balise li est appariée et en minuscule.
Défaut apparence marqueur est représenté par un cercle plein. Cependant, vous pouvez modifier son apparence en appliquant l'attribut type, qui a les valeurs suivantes : disque, cercle, carré. La valeur du disque (qui détermine l'apparence du marqueur de cercle rempli) est la valeur par défaut. C'est-à-dire que si l'attribut type n'est pas spécifié, l'apparence du marqueur ressemblera à un cercle plein. Si nous ajoutons ces attributs à la balise ul, nous obtenons les options suivantes :
Naturellement, chaque marqueur d'un élément distinct de la liste à puces peut avoir sa propre apparence en prescrivant les valeurs appropriées pour l'attribut de type.
Listes HTML numérotées - balises ol et li
Voyons maintenant comment une liste numérotée est formée à l'aide de balises ol (balises de bloc et paires, similaires à ul). La balise li agit également comme une balise qui définit les éléments de la liste html numérotée. Une liste numérotée est une collection d'éléments numérotés. Le type de numérotation est déterminé par l'attribut type, qui peut prendre les valeurs suivantes :
- A - lettres latines majuscules ;
- a - lettres latines minuscules;
- I - chiffres romains majuscules;
- i - chiffres romains minuscules ;
- 1 - Chiffres arabes
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
- 1 élément dans une liste numérotée
- 2 éléments dans une liste numérotée
- 3 éléments dans une liste numérotée
Vous pouvez également fournir une liste numérotée où les éléments sont numérotés dans l'ordre inverse, par exemple : 3, 2, 1. Cela se fait à l'aide de l'attribut reserve de la balise ol.
Il est également possible de commencer une liste à puces avec n'importe quel autre numéro au lieu de 1. Pour ce faire, vous pouvez utiliser l'attribut start, et la valeur de l'attribut type n'a aucune importance. Voir un exemple d'utilisation de l'attribut name en conjonction avec significations différentes l'attribut type (1 et I) :
Listes de définitions HTML - balises dl, dd, dt
Un autre type de listes html est une liste de définitions. Il est formé comme suit. Le contenu de cette liste est inclus entre les balises dl d'ouverture et de fermeture qui forment le conteneur. La balise dt définit un terme et dd est la description de ce terme.
Comme vous pouvez le voir, le contenu de la balise dt, qui est un terme, est décalé vers la gauche, et le contenu de la balise dd, qui est la définition de ce terme, est écrit en italique. Tout cela est réalisé grâce à l'utilisation de divers styles css, dont nous parlerons certainement dans les prochaines publications.
Soit dit en passant, les réalités modernes sont telles que langage html ne peut pas être consulté isolément, alors pour ne pas manquer ces éléments essentiels, abonnez-vous à la mise à jour du blog via le flux RSS ou par e-mail. Ceci conclut le sujet de l'article d'aujourd'hui, si vous avez reçu information nécessaire, ne refusez pas d'utiliser les boutons des réseaux sociaux.
| Type de liste | Code HTML | Exemple |
|---|---|---|
| Liste avec des puces sous la forme d'un cercle | ||
| Liste avec des puces sous la forme d'un cercle | ||
| Liste avec marqueurs carrés |
Le type de marqueurs peut varier légèrement en différents navigateurs, ainsi que lors de la modification de la police et de la taille du texte.
La création d'une liste avec des marqueurs carrés est illustrée dans l'exemple 11.2.
Exemple 11.2. Type de marqueur
Changer les croyances
Le résultat de cet exemple est montré dans la Fig. 11.2.
Dans le langage de balisage html, il existe 3 types de listes : les listes ordonnées (numérotées), non ordonnées (non numérotées) et les listes de définitions.
Pour construire une telle liste, 2 types d'éléments sont nécessaires : « ul » (abréviation de liste non ordonnée) et « li » (élément de liste). Tout ce qui est écrit à l'intérieur du 'li' est marqué avec un marqueur.
L'apparence d'une telle liste peut être contrôlée en spécifiant les types de marqueurs.
Types de marqueurs
Il existe un type d'attribut spécial, qui est placé dans les deux éléments de la liste. C'est votre type de marqueur. Il en existe 3 types au total : cercle, disque et carré :
- - carré
- - disque
- - cercle
Selon l'endroit où spécifier le type de marqueur, vous pouvez le modifier pour toute la liste ou pour un élément spécifique.
Liste ordonnée
Pour construire une liste, vous avez également besoin de 2 éléments : « ol » et « li » (élément de liste). Les marqueurs sont remplacés par des chiffres en pointillés. Un exemple de liste simple :
Vous pouvez contrôler l'apparence d'une liste ordonnée en spécifiant différents types numérotage.
Types de numérotation
Il existe un attribut de type spécial qui apparaît sur l'élément « ol » ou « li ». C'est le type de votre liste. Il en existe 5 types au total :
- - Numérotation en chiffres arabes (1, 2, 3)
- - Numérotation lettres majuscules(A, B, C)
- - Numérotation minuscules(a, b, c)
- - Numérotation en gros chiffres romains (I, II, III)
- - Numérotation en petits chiffres romains (i, ii, iii)
- - Avec quel chiffre commencer la numérotation
Selon l'endroit où spécifier le type de numérotation, vous pouvez le modifier pour toute la liste ou pour un élément spécifique.
Liste de définitions
Une liste de définitions a été élaborée pour les entrées du dictionnaire.
Il existe un conteneur commun 'dl'. À l'intérieur se trouvent « dt » (terminaison de la définition) et « dd » (la description de la définition). Exemple le plus simple :
Tous les éléments de toutes les listes sont bloqués. Mais à l'intérieur de l'élément « dt », vous ne pouvez mettre éléments en ligne... Vous pouvez mettre ce que vous voulez dans les éléments 'dd' et 'li'. C'est là qu'interviennent les listes imbriquées.
Imbriquées (listes mixtes)
Ce sont des listes à plusieurs niveaux, au sein desquelles il existe une hiérarchie. De telles listes sont souvent utilisées lors de la création d'un plan de site. Exemple:
- Liste mixte
Bonne journée!
Dans cet article, vous découvrirez toutes les possibilités des listes, comprendrez comment faire une liste numérotée, maîtriserez les balises qui aideront à rendre une simple liste à puces plus intéressante et perceptible avec des puces arbitraires. Après avoir terminé la leçon, vous comprendrez où les listes sont utilisées et dans quelles circonstances elles peuvent être utilisées.
Cet article est le troisième de ce court tutoriel sur le HTML de base. Avant de lire cette leçon, je vous recommande de parcourir les deux précédentes :
L'article vient juste de commencer et vous remarquerez peut-être déjà l'utilisation d'une liste à puces standard. Sur mon site, cela a l'air assez simple : sur la gauche il y a un petit retrait avec une ligne et un marqueur carré. Plus loin dans l'article, nous examinerons de plus près ce que sont les marqueurs, comment faire des nombres et aussi comment créer votre propre marqueur.
Dans chaque partie de l'article, la création de certaines listes sera accompagnée d'explications détaillées pour l'insertion d'une liste particulière.
1. Listes à puces en HTML
Ce type de listes est utilisé pour énumérer un ensemble d'éléments de sens similaire dans le texte. Il peut s'agir d'une liste de liens liés au même sujet, d'une explication détaillée de parties individuelles du texte. Mais voyons à quoi ressemblent les listes à puces dans le code :
Et voici à quoi cela ressemble dans le navigateur :
Riz. 1.1. Vue standard de la liste non ordonnée à puces HTML dans le navigateur1.1 Puces standard
Dans l'image ci-dessus (Figure 1.1.), Vous pouvez voir les cercles au début de chaque élément de menu. C'est le marqueur. Par défaut, il s'agit d'un cercle plein dans le navigateur. Il existe plusieurs types de marqueurs en HTML : cercle plein, cercle vide et carré. Ils ne nécessitent pas de CSS ou d'images tierces :
1.2 Marqueur de liste sous forme de cercle vide
Vous connaissez les valeurs des attributs, mais voyons maintenant comment créer une liste à puces HTML dans le code. Dans le tableau ci-dessus, nous avons sélectionné la deuxième valeur "cercle" pour l'attribut type et l'avons affectée à notre liste à puces :
| <html> <tête> <titre> Un exemple de liste à puces avec un marqueur de cercle vide</ titre> </ tête> <corps> <p>Étoiles:</p> <ul type = "cercle"> <li> Sirius</ li> <li> Arcturus</ li> <li> Pollux</ li> <li> Bételgeuse</ li> <li> Le soleil</ li> </ ul> </ corps> </html> |
Voyons à quoi ressemblera ce code dans le navigateur :
Riz. 1.2. Vue puce pour une liste sous forme de cercle dans le navigateur1.3 Marqueur de liste sous forme de carré
Voyons également le dernier exemple avec une puce carrée pour la liste HTML :
Remarquez le marqueur, il est devenu carré :
Riz. 1.3. Vue puce pour une list box sous forme de carré dans le navigateurNote importante: ceci n'est plus utilisé pour styliser les listes à puces. Il y a une séparation claire entre CSS (lisez ce qu'est CSS) et HTML. HTML est pour le balisage et CSS est pour la beauté.
Le code qui contient cet attribut, lors de la spécification du type du document actuel en HTML5 (""), donnera une erreur lors de la validation. Si vous n'avez pas entendu ce qu'est la validation, alors vous devriez aller ici -.
L'erreur sera la suivante :
Riz. 1.4. Erreur sur le validateur lors de l'utilisation de l'attribut "type" de la listeNous avons calculé les listes à puces. Passons maintenant aux listes numérotées, puis considérons les listes imbriquées et quelques exemples prêts à l'emploi qui sont le plus souvent utilisés sur des sites réels.
2. Listes numérotées en HTML
Contrairement au type de listes précédent, les listes numérotées ont une caractéristique importante : elles ajoutent automatiquement une numérotation. Ceci est utile lorsque la numérotation doit être effectuée. grande liste... Cela prendra beaucoup de temps manuellement et vous pouvez toujours vous perdre. Une liste numérotée est spécifiée à l'aide d'une balise. A quoi ça ressemble en pratique :
Exemple de liste numérotée :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <tête> <titre> Exemple de liste numérotée standard</ titre> </ tête> <corps> <p> Un à cinq :</p> <ol> <li> D'abord</ li> <li> Seconde</ li> <li> Troisième</ li> <li> Quatrième</ li> <li> Cinquième</ li> </ol> </ corps> </html> |
Voici à quoi ressemble une liste numérotée avec paramètres standards dans le navigateur :
Riz. 2.1. Liste numérotée dans un navigateur avec des paramètres standardComme son prédécesseur (liste à puces), il possède ses propres styles d'affichage des nombres. La numérotation simple n'est pas le seul type de puces pour une liste numérotée en HTML.
2.1 Puces standard pour une liste numérotée
Ici, nous avons le choix non pas de trois types de marqueurs, mais de cinq :
| Nom du marqueur | La valeur de l'attribut "type" | Exemple de liste |
|---|---|---|
| Marqueurs de chiffres arabes | 1 | |
| Marqueurs sous forme de lettres latines minuscules | une | |
| Marqueurs sous forme de lettres latines majuscules | UNE | |
| Marqueurs de chiffres romains minuscules | je | |
| Marqueurs de chiffres romains majuscules | je |
2.2 Numérotation personnalisée dans la liste HTML
En plus de la sortie habituelle d'une liste numérotée, nous pouvons également commencer notre numérotation à partir de n'importe quel chiffre. Pour ce faire, vous devez définir l'attribut supplémentaire "start". Cette numérotation fonctionne pour tous les types de puces pour les listes numérotées. A quoi ça ressemble en pratique :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <tête> <titre> Numérotation aléatoire pour une liste numérotée</ titre> </ tête> <corps> <p> Nous commençons à compter à douze :</p> <ol type = "a" start = "12"> <li> Douze</ li> <li> Treize</ li> <li> Quatorze</ li> <li> Quinze</ li> <li> Seize</ li> </ol> </ corps> </html> |
Voici comment il s'affichera sur un site en direct :
Riz. 2.2. Numérotation à partir d'un nombre arbitraire dans une liste numérotéeDans l'image ci-dessus, nous avons numéroté la liste à partir de douze, tout en faisant des marqueurs sous forme de lettres latines minuscules. Maintenant, je pense, il est devenu clair comment utiliser ces attributs dans vos projets.
Passons maintenant aux listes HTML imbriquées.
3. Comment faire une liste à plusieurs niveaux (emboîtée) en HTML
Des listes à plusieurs niveaux sont utilisées sur le site pour construire le menu. Ce menu ressemble le plus souvent à une liste déroulante soit vers le bas (leçon sur), soit vers la gauche ou la droite. De tels menus vous permettent de stocker d'autres éléments de menu sous une forme compacte.
En utilisant des modèles de voitures comme exemple, nous allons construire une liste à plusieurs niveaux en HTML :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <tête> <titre> Liste à puces imbriquée HTML</ titre> </ tête> <corps> <ul> <li> Citroën<ul> <li> Berlingo</ li> <li> C1</ li> <li> C2</ li> <li> C3 Picasso</ li> <li> C4 Grand Picasso</ li> </ ul> </ li> <li> KIA</ li> <li> Toyota</ li> <li> Audi</ li> <li> Lexus</ li> </ ul> </ corps> </html> |
Remarquez à quoi ressemble une liste à plusieurs niveaux dans un navigateur :
Riz. 3.1. Un exemple de liste à plusieurs niveaux en HTMLNous avons fait une liste à plusieurs niveaux en utilisant une puce (tag
- ). La liste à plusieurs niveaux avec les modèles Citroën est venue avec d'autres marqueurs. La liste principale avec des puces remplies et la liste de 2ème niveau avec des cercles vides. Mais, rappelez-vous, avec l'attribut "type", nous pouvons remplacer les marqueurs (il est préférable de les définir).
Mais nous pouvons combiner des listes à plusieurs niveaux numérotées et à puces comme ceci :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <tête> <titre> Listes numérotées, à puces et numérotées en HTML</ titre> </ tête> <corps> <ul> <li> Le premier groupe de tulipes<ol> <li> Première année<ul> <li> Tulipes précoces simples</ li> </ ul> </ li> <li> Seconde classe<ul> <li> Tulipes éponge</ li> </ ul> </ li> </ol> </ li> </ ul> </ corps> </html> |
Dans l'exemple ci-dessus, nous avons une double imbrication (2 niveaux). Tout d'abord, nous mettons dans une liste de deux classes de tulipes, nous l'avons numérotée. Ensuite, une liste à puces est imbriquée dans chacun des éléments de la liste numérotée.
Nous regardons son apparence dans le navigateur :
Riz. 3.2. Un exemple de liste numérotée à plusieurs niveaux dans une liste à puces dans un navigateur4. Ressources utiles pour les listes HTML
Il contient des informations qui nécessitent une compréhension des propriétés CSS. Pour ce faire, je vous recommande d'étudier les leçons suivantes :. Tous les exemples seront immédiatement avec code source et sont décomposés en onglets HTML (structure), CSS (styles) et Résultat (résultat).
4.1 Comment transformer une liste HTML en chaîne
Vous devrez peut-être transformer la liste HTML en chaîne lors de la création d'un menu horizontal. C'est très simple à faire :
4.2 Comment faire une liste HTML sans icône
La propriété list-style-type dans CSS est responsable de cela (plus de détails):
4.3 Comment faire une liste en HTML centrée
Un élément de liste est un élément de bloc, il doit donc être centré à l'aide du remplissage. Mais il y a un point important - nous devons spécifier explicitement la largeur pour que l'alignement fonctionne :
4.4 Comment faire une liste en HTML avec des images
Une seule propriété CSS list-style-image suffit. Dans l'url, spécifiez l'adresse avant l'icône. Je veux juste noter qu'il vaut mieux sélectionner une petite image tout de suite, car la hauteur de la ligne de liste en dépend :
4.5 Liste à puces HTML de votre marqueur
Dans ce cas, vous devez connecter les icônes de police (par exemple, FontAwesome) à l'avance. Ensuite, vous pouvez créer n'importe quelle icône à la place du marqueur standard :
4.6 Comment faire une liste multi-colonnes en HTML
Pour créer une liste à plusieurs colonnes, nous utiliserons la propriété CSS column-count (cette propriété n'est prise en charge que dans les navigateurs suivants : IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Vous devez également définir la hauteur de la liste afin de voir la division en plusieurs colonnes :
5. Pratique du travail avec des listes
Dans la vidéo ci-dessous, vous pouvez voir tout le travail avec les listes HTML en pratique :
Les listes numérotées sont une collection d'éléments avec leurs numéros séquentiels. Le type et le type de numérotation dépendent des paramètres de l'élément
- , qui est utilisé pour créer la liste. Les valeurs suivantes peuvent être utilisées comme éléments de numérotation :
En pratique, les principes d'affichage des éléments d'une liste à puces peuvent être appliqués de la même manière qu'une liste numérotée. Mais étant donné que nous avons affaire à une énumération, il y a certaines caractéristiques, qui seront discutées ci-dessous.
Numérotation des listes
Il est permis de commencer la liste à partir de n'importe quel numéro ; l'attribut start de l'élément est utilisé à cette fin
- ou la valeur de l'élément
