1 img {
2 width: 180px;
3 }
4 div.img{
5 border:1px solid #cccccc;
6 float: left;
7 margin: 5px;
8 width:180px;
9 height: 200px;
10 }
11 div.img img{
12 width:100%;
13 height:100%;
14 }
15 div.desc{
16 text-align: center;
17 padding: 5px;
18 }
19 div.img:hover{
20 border:1px solid #000000;
21 }
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>coffee2</title>
6 <link rel="stylesheet" type="text/css" href="../static/css/2.css">
7 </head>
8 <body>
9 <div class="recommond">
10 <div class="img">
11 <a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5"><img src="http://www.005.tv/uploads/allimg/160129/3-16012Z95Q44K.jpg"></a>
12 <div class="desc"><a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5">路飞</a></div>
13 </div>
14 <div class="img">
15 <a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5"><img
16 src="http://a1.att.hudong.com/61/13/01300543476268144723136125333_s.jpg"></a>
17 <div class="desc"><a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5">索隆</a></div>
18 </div>
19 <div class="img">
20 <a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5"><img
21 src="http://www.upicture.com.cn/UploadFiles/201506/20150617180844998.jpg"></a>
22 <div class="desc"><a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5">香吉士</a></div>
23 </div>
24 </body>
25 </html>
