Maison > Article > interface Web > CSS : explication détaillée de la différence entre list-style-type et list-style-image
CSS : explication détaillée de la différence entre list-style-type et list-style-image
- 黄舟original
- 2017-06-29 13:40:252612parcourir
Liste CSS
Dans une liste non ordonnéeff6d136ddc5fdfeffaf53ff6ee95f185, la marque de l'élément de liste est un point qui apparaît à côté de chaque élément de liste.
Dans une liste de séquencesc34106e0b4e09414b63b2ea253ff83d6, le symbole peut être une lettre, un chiffre ou un symbole dans un autre système de comptage.
list-style-type : liste 1441506a044b6851db0336e136714c67 attribut de style
ul.circle {list-style-type:circle} /*无序原点marker*/
ul.square {list-style-type:square} /*无序方点marker*/
ol.upper-roman {list-style-type:upper-roman} /*大写罗马排序*/
ol.lower-alpha {list-style-type:lower-alpha} /*小写字母排序*//*其他属性值：*/
/*‘disc’是实心圆------‘decimal'阿拉伯数字-----'lower-roman'小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/ <pre name="code" class="html">
<style type="text/css">
ul.circle {list-style-type:<span style="background-color: rgb(255, 255, 102);">circle</span>}
ul.square {list-style-type:<span style="background-color: rgb(255, 255, 51);">square</span>}
ol.upper-roman {list-style-type:<span style="background-color: rgb(102, 255, 153);">upper-roman</span>}
ol.lower-alpha {list-style-type:<span style="background-color: rgb(102, 255, 153);">lower-alpha</span>}
</style>
</head>
<body>
<p>Type circle:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="circle"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="square"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li></ul> <p>Type upper-roman:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="upper-roman"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <p>Type lower-alpha:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="lower-alpha"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
list-style-imageUtilisation :
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
Effet d'exécution :
Cet attribut spécifie une image comme symbole pour un élément de liste ordonné ou non ordonné. La position
de l'image par rapport au contenu de l'élément de liste est généralement contrôlée à l'aide de l'attribut list-style-position.
Remarque : Veuillez toujours spécifier un attribut "list-style-type" au cas où l'image ne serait pas disponible et pourrait toujours être affichée sous forme de liste avec le marqueur
.
Cet attribut spécifie une image comme symbole pour un élément de liste ordonné ou non ordonné. Le placement de l'image par rapport au contenu de l'élément de liste est généralement contrôlé à l'aide de la propriété list-style-position.
Remarque : spécifiez toujours un attribut "list-style-type" au cas où l'image ne serait pas disponible.
En utilisation réelle, pour plus de commodité, les trois valeurs d'attribut ci-dessuspeuvent être combinées dans un style de liste, par exemple :
li {list-style : url(example.gif) square inside}Les valeurs de style liste peuvent être répertoriées dans n'importe quel ordre, et tant qu'une valeur est spécifiée, les autres valeurs seront répertoriées avec les valeurs par défaut. -type est la liste "disque" - La valeur par défaut de style-position est "à l'extérieur"
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!