一、商品分类页面
二、Html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="c1">酒水、饮料</li>
<li class="c2">进口食品</li>
<li class="c3">休闲零食</li>
<li class="c4">地方特产</li>
<li class="c5">保健、冲调</li>
<li class="c6">粮油、生鲜</li>
<li class="c7">美容洗护</li>
<li class="c8">清洁洗涤</li>
<li class="c9">母婴、纸品</li>
<li class="c10">家居百货</li>
</ul>
</body>
</html>
三、CSS样式如下：
<style>
ul{border-style: solid;
width: 200px;
border-color: darkorange;
padding: 0px;
}
li{
line-height: 50px;
list-style: none;
background-repeat: no-repeat;
text-indent: 3em;
font-weight: 700;
border-bottom: dotted 1px dimgray;
}
.c1{background-image: url(icon_01.jpg);}
.c2{background-image: url(icon_02.jpg);}
.c3{background-image: url(icon_03.jpg);}
.c4{background-image: url(icon_04.jpg);}
.c5{background-image: url(icon_05.jpg);}
.c6{background-image: url(icon_06.jpg);}
.c7{background-image: url(icon_07.jpg);}
.c8{background-image: url(icon_08.jpg);}
.c9{background-image: url(icon_09.jpg);}
.c10{background-image: url(icon_10.jpg);}
</style>
34万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
