代码
1.HTML文件
<title>商品图片列表</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div id="list">
<h3>1F 美妆 珠宝</h3>
<ul>
<li>
<a href="#"><img src="images/photo-1.jpg"></a>
</li>
<li>
<a href="#"><img src="images/photo-2.jpg"></a>
</li>
<li>
<a href="#"><img src="images/photo-3.jpg"></a>
</li>
<li>
<a href="#"><img src="images/photo-4.jpg"></a>
</li>
<li>
<a href="#"><img src="images/photo-5.jpg"></a>
</li>
</ul>
</div>
</body>
</html>
2.CSS文件
h3{
background-color:#9874f2;
line-height:40px;
font-size:16px;
color:#fff;
text-indent:1em;
margin:0px;
padding:0px;}
*{
padding: 0px;
margin: 0px;
}
list{
width: 220px;
margin: 0px auto;
}
ul{
list-style: none;
}
li{
width: 209px;
height: 98px;
}
a img{
border-style: solid;
border-color:#D0CBCF;
border-width: 1px;
}
a:hover img{
border-style: solid;
border-color:#DA7912;
border-width: 1px;
}
效果
image.png
