列表相关属性：
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>
css列表相关属性
原文地址：https://www.cnblogs.com/yfy0529/p/8588213.html