列表样式
列表样式可以控制有序列表/无序列表的列表属性
网页中的列表效果一般通过背景图像实现
列表类型
列表项的标志可以通过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