Exemple d'explication du style de liste CSS

Liste CSS

Liste CSSAttribut fonctionne comme suit :

Définir différents éléments de liste à marquer comme listes ordonnées

Définir différents éléments de liste marqués comme liste non ordonnée

Définir les éléments de liste marqués comme images

Liste

En HTML, il existe deux types de listes :

Liste non ordonnée - les éléments de la liste sont marqués par des graphiques spéciaux (tels que des petits points noirs, des petites cases, etc.)

Liste ordonnée - les éléments de la liste sont marqués par des chiffres ou des lettres

Utilisez CSS, d'autres styles peuvent être répertoriés et des images peuvent être utilisées comme marqueurs d'éléments de liste.

Différentes balises d'élément de liste

L'attribut list-style-type spécifie le type de balise d'élément de liste : :

Instance

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Une certaine valeur sont des listes non ordonnées, et certaines sont des listes ordonnées.

Image comme marqueur d'élément de liste

Pour spécifier une image comme marqueur d'élément de liste, utilisez l'attribut d'image de style de liste :

Instance

ul
{
list-style-image: url('sqpurple.gif');
}

ci-dessus Les exemples ne s'affichent pas de la même manière dans tous les navigateurs, IE et Opera affichent des balises d'image un peu plus hautes que Firefox, Chrome et Safari.

Si vous souhaitez placer le même logo d'image dans tous les navigateurs, vous devez utiliser la solution de compatibilité des navigateurs. Le processus est le suivant

Solution de compatibilité des navigateurs

Également dans tous. navigateurs, l'exemple suivant affichera la balise d'image :

Exemple

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

Exemple Explication :

ul:

Le type de style de liste de paramètres est aucun Supprimez la balise d'élément de liste

Définissez le remplissage et la marge sur 0px (compatibilité avec le navigateur)

Tous les li dans ul :

Définissez l'URL de l'image et configurez-le pour qu'il ne soit affiché qu'une seule fois (pas de duplication)

Positionnez l'image où vous le souhaitez (0px à gauche et 5px en haut et en bas)

Placez le texte dans la liste en utilisant l'attribut padding-left Dans

attribut list-abbreviation

tous les attributs de liste peuvent être spécifiés dans un seul attribut. C'est ce qu'on appelle un attribut d'abréviation.

Utiliser des attributs abrégés pour les listes. Les attributs de style de liste sont définis comme suit :

Instance

ul
{
list-style: square url("sqpurple.gif");
}

Si des valeurs d'attribut abrégées sont utilisées, l'ordre des valeurs. ​​est :

list -style-type

list-style-position (Voir le tableau des propriétés CSS ci-dessous pour les instructions)

list-style -image

Si l'une des valeurs ci-dessus est manquante et que les autres sont toujours dans l'ordre spécifié, cela n'a pas d'importance.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

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!