列表樣式
列表樣式可以控制有序列表/無序列表的列表屬性
網頁中的列表效果一般通過背景圖像實現
列表類型
列表項的標誌可以通過list-style-type屬性進行控制
list-style-type屬性值可以爲：
- none，無標誌
- disc，實心圓
- square，實心矩形
- circle，空心圓
- decimal，數字
- lower-alpha，小寫字母
- upper-alpha，大寫字母
.list1{
list-style-type:decimal;
}
.list2{
list-style-type:lower-alpha;
}
<ul class="list1">
<li>其實我是無序列表</li>
<li>其實我是無序列表</li>
</ul>
<ol class="list2">
<li>其實我是有序列表</li>
<li>其實我是有序列表</li>
</ol>
列表圖像list-style-p_w_picpath屬性
list-style-p_w_picpath屬性可以設置列表項的圖像標誌
.list{
list-style-type:none;
list-style-p_w_picpath:url(p_w_picpaths/Centos.png);
}
<ul class="list">
<li>三國演繹</li>
<li>西遊記</li>
<li>水滸傳</li>
<li>紅樓夢</li>
</ul>
列表位置list-style-position屬性
list-style-position屬性可以控制列表標記的位置
list-style-position的屬性值可以爲inside或者outside
.list1 li{
list-style-position:inside;
border:2px solid red;
width:200px;
}
.list2 li{
list-style-positionutside;
border:2px solid blue;
width:200px;
}
<ul class="list1">
<li>列表標誌在內側</li>
<li>列表標誌在內側</li>
</ul>
<ul class="list2">
<li>列表標誌在外側</li>
<li>列表標誌在外側</li>
</ul>
列表list-style屬性
list-stype屬性可以控制列表樣式
list-style的語法結構是
- list-style：type url position；
一般情況下，直接將list-style屬性設置爲none