列表相关属性：
1.list-style-image:自定义项目符号，允许指定一个外部图标文件，以满足个性化设计需求；
2.list-style-position:定义项目符号的显示位置，改属性值包括outside和inside，其中outside表示把项目符号显示在列表项的文本行以外，列表符号默认显示为outside，inside表示吧项目符号显示在列表项文本行以内；
3.list-style-type：定义列表项目符号的类型。
4.list-style-type:none;隐藏列表结构的默认项目符号。
书写格式例：
ul li{
list-style-image:url("img/list.png");
list-style-position:outside;
}
或者如下：
ul li{
list-style:url("img/list.png") outside;
}
具体事例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list attribute</title>
<style>
*{ /*通配选择器消除内外边距*/
margin:0;
padding:0;
}
.cont{
width: 1100px;
height: 590px;
margin:0 auto;/*设置居中*/
background-image:url("img/pack.jpg");
background-size:100% 100%;
}
.top{
height: 39px;
background-color:#FFFC81;
text-align:left;
}
.top ul li {
list-style-type: none;
float: left;
width: 100px;
margin-left: 110px;
margin-top:5px;
text-align: center;
line-height: 30px;
}
/*}*/
/*.top ul>:first-child{*/
/*width:270px;*/
/*}*/
.top ul li:nth-child(1){
width:270px;
}
.bottom {
width: 270px;
text-align: center;
margin-left: 110px;
}
.bottom ul li{
list-style-type:none;
height:40px;
margin-top:10px;
border:1px dashed #DB4F35;
border-radius:10px;
/*background-image:url("img/bullet_main_02.gif");*/
/*background-position:left center;*/
/*background-repeat:no-repeat;!*禁止背景图片平铺显示*!*/
background-size:30px;
line-height:45px;
text-align:center;
}
.top ul li:hover{
background-color: #f2f2f2;
color:red;
opacity: .5;
cursor: pointer;/*设置鼠标悬停时的光标形状*/
}
.bottom ul li:hover{
opacity:.5;/*设置透明度*/
}
</style>
</head>
<body>
<div class="cont">
<div class="top">
<ul>
<li>商品分类</li>
<li>春节特卖</li>
<li>会员特价</li>
<li>机友必看</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>女装/内衣</li>
<li>男装/户外</li>
<li>女鞋/男鞋</li>
<li>美妆/家具</li>
<li>零食/鲜果</li>
<li>电器/电子</li>
</ul>
</div>
</div>
</body>
</html>
