标签：height hover lang lin 分享 下划线 one com width
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 }
标签：height hover lang lin 分享 下划线 one com width
原文地址：http://www.cnblogs.com/pys965085265/p/7698841.html
