CSS:list-style-type與list-style-image的區別詳解

來源:互聯網
上載者:User
CSS列表

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

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

list-style-type:列表<序列的標誌(marker)>樣式屬性

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-image使用:

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


運行效果:


這個屬性指定作為一個有序或無序清單項目標誌的映像。映像相對於清單項目內容的放置位

置通常使用 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”

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.