CSS实例：图片导航块 

 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>

 

posted @ 2017-10-20 21:55  017廖佳辉  阅读(145)  评论(0)    收藏  举报