CSS: Detailed explanation of the difference between list-style-type and list-style-image-CSS Tutorial-php.cn

CSS: Detailed explanation of the difference between list-style-type and list-style-image

黄舟

Release： 2017-06-29 13:40:25

Original

2756 people have browsed it

CSS List

In an unordered list

In a sequence list

list-style-type：List style attribute

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} /*小写字母排序*/

Copy after login

/*其他属性值：*/

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

list-style-imageUsage:

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

Copy after login

Running effect:

list-style-position

Note: Please always specify a "list-style-type" attribute in case the image is not available and can still be displayed as a list with a

In actual use, for convenience, the above three attribute values can be combined into list-style, for example:

li {list-style : url(example.gif) square inside}

Copy after login

The values of list-style can be listed in any order, and as long as one value is specified, other values will be listed with default values. The default value of list-style-type is "disc" list-style- The default value of position is "outside"

The above is the detailed content of CSS: Detailed explanation of the difference between list-style-type and list-style-image. For more information, please follow other related articles on the PHP Chinese website!