首页 > Web开发 > 详细

CSS实例:图片导航块

时间:2017-10-20 12:44:30      阅读:28      评论:0      收藏:0      [点我收藏+]

标签:cnblogs   doc   a标签   esc   com   body   ima   ref   log   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="../static/css/1020.css">
 7 </head>
 8 <body>
 9 <div>
10     <div class="img">
11         <a href="http://www.gzcc.cn/"><img src="http://www.005.tv/uploads/allimg/160428/13-16042Q43401629.jpg"></a>
12         <div class="desc"><a href="http://www.gzcc.cn/">我是链接1</a></div>
13     </div>
14 
15     <div class="img">
16         <a href="http://www.gzcc.cn/"><img src="http://www.deskier.com/uploads/allimg/170626/1-1F626213616.jpg"></a>
17         <div class="desc"><a href="http://www.gzcc.cn/">我是链接2</a></div>
18     </div>
19 
20     <div class="img">
21         <a href="http://www.gzcc.cn/"><img src="http://ww2.sinaimg.cn/large/9bfa86dcgw1f3zmypw1rwj21hc0u0765.jpg"></a>
22         <div class="desc"><a href="http://www.gzcc.cn/">我是链接3</a></div>
23     </div>
24 
25     <div class="img">
26         <a href="http://www.gzcc.cn/"><img src="http://bizhi.pcze.com/zhuomian/1920x1200_1920x1080/52504.jpg"></a>
27         <div class="desc"><a href="http://www.gzcc.cn/">我是链接4</a></div>
28     </div>
29     <div class="clearfloat">
30         <img src="http://www.005.tv/uploads/allimg/160428/13-16042Q43401629.jpg"><br>
31         <img src="http://www.deskier.com/uploads/allimg/170626/1-1F626213616.jpg"><br>
32         <img src="http://ww2.sinaimg.cn/large/9bfa86dcgw1f3zmypw1rwj21hc0u0765.jpg"><br>
33         <img src="http://bizhi.pcze.com/zhuomian/1920x1200_1920x1080/52504.jpg">
34     </div>
35 
36 </div>
37 </body>
38 </html>
 1 img {
 2     width: 300px;
 3 }
 4 
 5 div.img {
 6     width: 180px;
 7     border: 1px solid #ccc;
 8     float: left;
 9     margin: 5px;
10 }
11 
12 div.img img {
13     width: 180px;
14     height: auto;
15 }
16 
17 div.img:hover {
18     border: 3px solid #DCDCDC;
19 
20 }
21 
22 div.desc {
23     text-align: center;
24     padding: 5px;
25 }
26 
27 a {
28     text-decoration: none; /*去除a标签下划线*/
29     color: brown; /*链接文本颜色为红色*/
30 }
31 
32 a:hover {
33     text-decoration: underline;/*鼠标移到链接会有下划线*/
34 }
35 
36 .clearfloat {
37     clear: both;
38 }

技术分享

 

CSS实例:图片导航块

标签:cnblogs   doc   a标签   esc   com   body   ima   ref   log   

原文:http://www.cnblogs.com/pys965085265/p/7698841.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号