首页 > 其他 > 详细

列表样式

时间:2016-07-17 02:52:58      阅读:259      评论:0      收藏:0      [点我收藏+]

列表样式


列表样式可以控制有序列表/无序列表的列表属性

网页中的列表效果一般通过背景图像实现


列表类型


列表项的标志可以通过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-image属性


list-style-image属性可以设置列表项的图像标志


.list{
        list-style-type:none;
        list-style-image:url(images/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


本文出自 “擎凇离雨痴木月” 博客,请务必保留此出处http://kinrey.blog.51cto.com/10492082/1826913

列表样式

原文:http://kinrey.blog.51cto.com/10492082/1826913

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!