列表相关属性：
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>
原文地址：https://www.cnblogs.com/yfy0529/p/8588213.html
时间： 2024-10-14 16:51:38