Maison >interface Web >tutoriel CSS >Que signifie le style de liste ? Explication détaillée des attributs de style de liste
Que signifie le style de liste ? Explication détaillée des attributs de style de liste
- 云罗郡主avant
- 2018-11-22 14:58:4043315parcourir
Le contenu de cet article porte sur ce que signifie le style de liste ? Une explication détaillée des attributs du style de liste, qui a une certaine valeur de référence. J'espère que cela vous sera utile.
1. La fonction et l'utilisation de list-style
list-style est de définir le style de la liste li. Par exemple, li est précédé de chiffres arabes, de points, de cercles pleins, d'images, de cercles creux, de lettres anglaises minuscules, de lettres anglaises majuscules, de chiffres arméniens traditionnels, etc.
2. Grammaire
1. Grammaire :
liste-style : liste-style-image || -style-type
Nous savons que la syntaxe HTML stipule que li doit être utilisé dans ul ou ol, donc pour ul ou ol, vous pouvez définir list-style-image pour introduire des images comme matériel de mise en page avant de li . Mais généralement, cette méthode n'est pas utilisée pour définir le matériau de l'image avant de li lors de la mise en page div css. Habituellement, l'image d'arrière-plan est définie directement sur li, ce qui est mieux compatible et plus facile à contrôler.
Nous utilisons l'attribut list-style-type, qui est principalement un style de liste, pour définir le style de devant par défaut de li.
2. Valeurs et explications du type de style de liste
Vous pouvez le tester vous-même pour voir les effets de différentes valeurs.
Paramètres :
3. Pratiques générales de mise en page
Habituellement, lors de la mise en page d'une page Web, vous avez besoin pour démarrer CSS Supprimez le style de liste des trois listes ul ol li, également pour être compatible avec les principaux navigateurs, et annulez le style de liste par défaut de la balise list.
Annulez le code de style de liste de ul li ol :
ul,ol,li{list-style:none}Dans la page Web, placez un point devant la liste, puis définissez l'image d'arrière-plan d'arrière-plan via le li.
1. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li布局实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>php.cn-1</li>
<li>php.cn-2</li>
<li>php.cn-3</li>
</ul>
</body>
</html>L'effet est le suivant :
2.
Supprimez le li ci-dessus. Le style de liste par défaut de ul et ol est défini sur mragin et le padding sur 0, la taille de la police est de 14 px et la hauteur de ligne est de 24 px. Pourquoi ne pas utiliser le propre type de style de liste de Li pour définir l'effet de point ? Cela est dû au fait qu'il existe certaines différences entre les différents navigateurs pour éviter différents effets de points et différentes distances par rapport à la gauche, de sorte que le style de style de liste est uniformément annulé et le style d'arrière-plan est réutilisé pour l'implémentation de la mise en page. Ce qui précède est une introduction complète à ce que signifie le style de liste ? Une explication détaillée des attributs de style de liste. Si vous souhaitez en savoir plus sur leTutoriel CSS3, veuillez prêter attention à. le site Web PHP chinois.
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!