列表分为有序列表和无序列表
我们知道有序列表的标签是 <ol> 意思是 order list
无序列表的标签是 < ul>
列表里面每项的标签用 < li > 来进行包裹.
使用 CSS 中的列表样式不仅可以变换列表的列表项标记, 还可以使用图片来作为列表项标记.
可以用
- list-style-image:
- url
- ('
- sqpurple
- .gif');
来设置列表的列表项标记为图片
也可以用
list-style-type: none;
来设置列表项的标志类型, 关于列表项标志的更多不同符号, 可以去查阅 css 的 list-style-type 属性
但是我们使用
- list-style-image:
- url
- ('
- sqpurple
.gif'); 的时候会有浏览器不兼容的现象.
因此, 为了设置浏览器兼容性, 情参照如下代码:
<style>
ul{
/* 首先设置列表项标记为 none, 也就是没有列表项标记 */
list-style-type:none;
/* 设置列表的外边距为 0(为了对不同的浏览器有更好的兼容性)*/
margin:0;
/* 设置列表的内边距为 0(为了对不同的浏览器有更好的兼容性)*/
padding:0;
}
/*ul 和 li 连在一起, 中间用空格隔开, 是表示 ul 标签内的所有 li 标签, 这个是经常使用的 */
ul li{
/* 设置列表项的背景 */
background-image:url(image/bg2.gif);
/* 设置列表项的背景不能平铺, 否则要铺到哪里去, 注意这里用的是 no-repeat, 而不是 None*/
background-repeat:no-repeat;
/* 设置列表项背景的位置, 水平位置为 0px, 垂直位置为 5px*/
background-position: 0px 5px;
/* 设置列表项内边距, 也就是边框内的填充. 左边填充 14px*/
padding-left:14px;
}
</style>
来源: http://www.bubuko.com/infodetail-2722976.html