CSS : explication détaillée de la différence entre list-style-type et list-style-image-tutoriel CSS-php.cn

CSS : explication détaillée de la différence entre list-style-type et list-style-image

黄舟

Libérer： 2017-06-29 13:40:25

original

2719 Les gens l'ont consulté

Liste CSS

Dans une liste non ordonnée

Dans une liste de séquences

list-style-type : liste 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} /*小写字母排序*/

Copier après la connexion

/*其他属性值：*/

Copier après la connexion

/*‘disc’是实心圆------‘decimal&#39;阿拉伯数字-----&#39;lower-roman&#39;小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/
<pre name="code" class="html">

Copier après la connexion

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

Copier après la connexion

</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>

Copier après la connexion

list-style-imageUtilisation :

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(&#39;/i/eg_arrow.gif&#39;)
}
</style>
</head>


<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>


</html>

Copier après la connexion

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}

Copier après la connexion

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!