1..png
.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美容產(chǎn)品熱點</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<div id="list">
<ul>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_01.jpg"><a href="#"> 酒水、飲料</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_02.jpg"><a href="#"> 進(jìn)口食品</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_03.jpg"><a href="#"> 休閑零食</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_04.jpg"><a href="#"> 地方特產(chǎn)</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_05.jpg"><a href="#"> 保健蜓氨、沖調(diào)</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_06.jpg"><a href="#"> 糧油丹禀、生鮮</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_07.jpg"><a href="#"> 美容洗護(hù)</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_08.jpg"><a href="#"> 清潔洗滌</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/icon_09.jpg"><a href="#"> 母嬰、紙品</a></li>
<li><img src="../../課后作業(yè)素材/商品分類頁面/圖片素材/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;
}
