首頁 > 文章 > web前端 > CSS：list-style-type與list-style-image的差異詳解

CSS：list-style-type與list-style-image的差異詳解

黄舟原創: 2017-06-29 13:40:252683瀏覽

CSS清單

在一個無序列表ff6d136ddc5fdfeffaf53ff6ee95f185中，清單項目的標誌 (marker) 是出現在各列表項目旁邊的圓點。

在一一個序列表c34106e0b4e09414b63b2ea253ff83d6中，標誌可能是字母、數字或另外某種計數體系中的一個符號。

list-style-type：清單91f037092cef265eea3c2fac3b4ffa25樣式屬性

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&#39;阿拉伯数字-----&#39;lower-roman&#39;小写罗马--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-image使用：

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

運行效果：

#這個屬性指定作為一個有序或無序列表項標誌的圖像。影像相對於清單項目內容的置位位元

置通常使用

list-style-position 屬性控制。

註解：請務必規定一個 "list-style-type" 屬性以防圖片不可用時仍然可以顯示為帶有

marker的清單。

這個屬性指定作為一個有序或無序列表項標誌的圖像。影像相對於清單項目內容的放置位置通常使用 list-style-position 屬性控制。

註解：請一律規定一個 "list-style-type" 屬性以防圖片不可用。

在實際使用中，為了方便，可以將上述三個屬性值合併成list-style，例如：

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

list-style的值可以以任何的順序列出，而且，只要寫明一個值，其他值都會以預設值列出，list-style-type的預設值為「disc」 list-style- position的預設值是「outside」

以上是CSS：list-style-type與list-style-image的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中list-style-type為什麼總失效？下一篇：css中list-style-type為什麼總失效？

看更多