CSS实例:图片导航块
- 认识CSS的 盒子模型。
- CSS选择器的灵活使用。
- 实例:
- 图片文字用div等元素布局形成HTML文件。
- 新建相应CSS文件,并link到html文件中。
- CSS文件中定义样式
- div.img:border,margin,width,float
- div.img img:width,height
- div.desc:text-align,padding
- div.img:hover:border
- div.clearfloat:clear
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <link rel="stylesheet" type="text/css" href="../static/css/020.css"> </head> <body> <div> <div class="img"> <a href="https://www.baidu.com/"> <img src="http://5b0988e595225.cdn.sohucs.com/images/20170710/163346174d5544d3b165253856ff1088.png"></a> <div class="ab"><a href="https://www.baidu.com/">for 百度网</a></div> </div> <div class="img"> <a href="http://www.sina.com.cn/"> <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/11/216582-201706111628426364.jpg"></a> <div class="ab"><a href="http://www.sina.com.cn/">for 新浪网</a></div> </div> <div class="img"> <a href="http://www.ifeng.com/"> <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/11/216582-201706111628430576.jpg"></a> <div class="ab"><a href="http://www.ifeng.com/">for 凤凰网</a></div> </div> <div class="img"> <a href="http://www.xinhuanet.com/"> <img src="http://n1.itc.cn/img8/wb/recom/2017/05/25/149569384522215779.JPEG"></a> <div class="ab"><a href="http://www.xinhuanet.com/">for 新华网</a></div> </div> <div class="img"> <a href="http://www.people.com.cn/"> <img src="http://www.08160.cn/uploads/allimg/170624/23-1F6241F01Vb.jpg"></a> <div class="ab"><a href="http://www.people.com.cn/">for 人民网</a></div> </div> <div class="img"> <a href="http://www.huanqiu.com/"> <img src="http://cms-bucket.nosdn.127.net/catchpic/4/44/4402d2488d5b809d02bc9ddb76533339.jpg?imageView&thumbnail=550x0"></a> <div class="ab"><a href="http://www.huanqiu.com/">for 环球网</a></div> </div> <div class="clearfloat"> <img src="http://5b0988e595225.cdn.sohucs.com/images/20170710/163346174d5544d3b165253856ff1088.png"> <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/11/216582-201706111628426364.jpg"> <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/11/216582-201706111628430576.jpg"> <img src="http://n1.itc.cn/img8/wb/recom/2017/05/25/149569384522215779.JPEG"> <img src="http://www.08160.cn/uploads/allimg/170624/23-1F6241F01Vb.jpg"> <img src="http://cms-bucket.nosdn.127.net/catchpic/4/44/4402d2488d5b809d02bc9ddb76533339.jpg?imageView&thumbnail=550x0"> </div> </body> </html>
img{ width: 250px; } div.img{ border: 2px solid #777777; width: 200px; float: left; margin: 6px; } div.img img{ width: 100%; height: auto; } div.ab{ text-align: center; padding: 5px; } div.img:hover{ border: 6px solid darkturquoise; } .clearfloat{ clear: both; }