<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>喵喵</title>
<link rel="stylesheet" type="text/css" href="../static/css/styles.css">
</head>
<body>
<div class="recommend">
<div class="img">
<a href="http://www.weibo.com/littlesundayday"><img src="http://wx2.sinaimg.cn/mw690/bde8475dgy1fkfhy0ed9vj21w01w07wh.jpg"></a>
<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>日</div>
</div>
<div class="img">
<a href="http://www.weibo.com/littlesundayday"><img src="http://wx3.sinaimg.cn/mw690/bde8475dgy1fkfhy1u1v7j21w01w07wh.jpg"></a>
<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>常</div>
</div>
<div class="img">
<a href="http://www.weibo.com/littlesundayday"><img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhxyq664j21w01w07wh.jpg"></a>
<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>丧</div>
</div>
<div class="img">
<a href="http://www.weibo.com/littlesundayday"><img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhycnx51j21w01w07wh.jpg"></a>
<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>气</div>
</div>
</div>
<div class="clearfloat">
<a href="http://www.weibo.com/littlesundayday"><img src="http://wx2.sinaimg.cn/mw690/bde8475dgy1fkfhy0ed9vj21w01w07wh.jpg" alt="1"></a><br>
<img src="http://wx3.sinaimg.cn/mw690/bde8475dgy1fkfhy1u1v7j21w01w07wh.jpg"><br>
<img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhxyq664j21w01w07wh.jpg"><br>
<img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhycnx51j21w01w07wh.jpg"><br>
</div>
</body>
</html>
img {
width:300px;
}
div.img{
border:1px solid #ccc;
width:230px;
float:left;
margin:5px;
}
div.img img{
width:100%;
height:auto;
}
/*字体居中*/
div.desc{
text-align:center;
padding: 5px;
}
/*清除浮动*/
div.clearfloat{
clear: both;
}
/*碰到图变成黑框*/
div.img:hover{
border: 1px solid #111111;
}
