CSS实例:图片导航块
1.认识CSS的 盒子模型。
CSS选择器的灵活使用。
3.实例:
1.图片文字用div等元素布局形成HTML文件。
2.新建相应CSS文件,并link到html文件中。
3.CSS文件中定义样式
1.div.img:border,margin,width,float
2.div.img img:width,height
3.div.desc:text-align,padding
4.div.img:hover:border
5.div.clearfloat:clear
html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <link rel="stylesheet" type="text/css" href="../static/css/pic.css"> </head> <body> <div class="recommend"> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg" ></a> <div class="desc"><a href="http://www.ooopic.com/3dmoxingku/10221322.html">校园风光</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"></a> <div class="desc"><a href="http://www.ooopic.com/3dmoxingku/10221322.html">教学资源</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"></a> <div class="desc"><a href="http://www.ooopic.com/3dmoxingku/10221322.html">学生风采</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"></a> <div class="desc"><a href="http://www.ooopic.com/3dmoxingku/10221322.html">师资团队</a></div> </div> </div> <div class="clearfloat"> <img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"><br> <img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"><br> <img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"><br> <img src="http://pic2.ooopic.com/10/22/13/22b1OOOPICf9.jpg"><br> </div> </body> </html>
css文件代码如下:
div.img{ border: 1px solid #ccc; width: 210px; float: left; margin: 5px; } div.desc{ text-align: center; padding: 5px; } div.img img{ width: 100%; height: auto; } div.img:hover{ border: 1px seagreen; } .clearfloat{ clear: both; }
运行截图: