1..png
.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美容产品热点</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<div id="list">
<ul>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_01.jpg"><a href="#"> 酒水、饮料</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_02.jpg"><a href="#"> 进口食品</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_03.jpg"><a href="#"> 休闲零食</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_04.jpg"><a href="#"> 地方特产</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_05.jpg"><a href="#"> 保健、冲调</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_06.jpg"><a href="#"> 粮油、生鲜</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_07.jpg"><a href="#"> 美容洗护</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_08.jpg"><a href="#"> 清洁洗涤</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_09.jpg"><a href="#"> 母婴、纸品</a></li>
<li><img src="../../课后作业素材/商品分类页面/图片素材/icon_10.jpg"><a href="#"> 家居百货</a></li>
</ul>
</div>
</body>
</html>
.CSS
*{
padding: 0px;
margin: 0px;
font-size: 14px;
}
ul{
list-style: none;
border-width: 2px;
border-style: solid;
border-color:#F89A26;
}
li{
font-size: 16px;
font-weight:bold;
color:#505050;
line-height: 24px;
margin-top: 10px;
padding-left: 12px;
padding-bottom: 5px;
border-bottom-style: dotted;
border-bottom-width: 2px;
border-bottom-color: #505050;
}
a{
text-decoration: none;
color:#505050;
background-repeat: no-repeat;
background-position: 2px 0px;
}
a:hover{
color:#C9490A;
background-repeat: no-repeat;
background-position: 2px 0px;
}
#list{
width: 360px;
margin: 0px auto;
}
