列表属性主要用于列表项的样式,常用的列表属性有
list-style-type 用于设置列表项的符号,取值None(无,使用此项可以取消掉列表中的默认列表项的符号) Disc(实心圆) Circle(实心圆) Square(实心方块)
list-style-image 使用此属性方法可以设置列表的开始符号为自定义图片
语法格式
list-style-image:url(图片路径)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置列表样式*/
li{
list-style-image:url(img/arrow.png);
line-height: 30px;/*设置li标签中的行高*/
}
/*设置a标签的默认样式*/
a{
color: gray;
text-decoration: none;
}
/*设置a标签的鼠标悬浮事件*/
a:hover{
color: red;
text-decoration: underline;/*显示下划线*/
}
</style>
</head>
<body>
<h1>购买咨询</h1>
<ul>
<li><a href="#">下单后可以修改订单吗</a></li>
<li><a href="#">订单如何取消</a></li>
<li><a href="#">无货商品几天可以到货</a></li>
<li><a href="#">合约机是什么</a></li>
<li><a href="#">合约机资费如何计算</a></li>
<li><a href="#">如何联系商家</a></li>
<li><a href="#">可以开发票</a></li>
</ul>
</body>
</html>
如图所示,调用列表的图片样式属性,将列表默认的项目符号换成了自定义的图片