2019-04-18 商品分类

代码
1.HTML文件

<body>
<div>
<ul>
<li class="a"><a href="#">酒水、饮料</a></li>
<li class="b"><a href="#">进口食品</a></li>
<li class="c"><a href="#">休闲零食</a></li>
<li class="d"><a href="#">地方特产</a></li>
<li class="e"><a href="#">保健、冲调</a></li>
<li class="f"><a href="#">粮油、生鲜</a></li>
<li class="g"><a href="#">美容洗护</a></li>
<li class="h"><a href="#">清洁洗涤</a></li>
<li class="i"><a href="#">母婴、纸品</a></li>
<li class="j"><a href="#">家居百货</a></li>
</ul>
</div>
</body>

2.CSS文件

*{
width:250px;
margin:0px auto;
padding:0px;
font-size:16px;
font-weight:bold;}
div{
width:250px;
border:2px #FF9900 solid;}
ul{
width:250px;
list-style:none;}
li{
width:250px;
padding-left:50px;}
a{
text-decoration:none;
color:#000000;}
a:hover{
text-decoration:none;
color:#F90;}
.a{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_01.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.b{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_02.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.c{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_03.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.d{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_04.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.e{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_05.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.f{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_06.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.g{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_07.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.h{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_08.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.i{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_09.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}
.j{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon_10.jpg);
background-repeat:no-repeat;
background-position:5px 10px;
line-height:60px;
border-bottom-style:dashed;
border-bottom-color:#666;
border-bottom-width:1px;}

效果


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。