1.认识CSS的 盒子模型。
2.CSS选择器的灵活使用。
3.实例:
1.图片文字用div等元素布局形成HTML文件。
2.新建相应CSS文件，并link到html文件中。
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.
<<!DOCTYPE html> <html lang="GZC"> <head> <meta charset="UTF-8"> <title>广州商学院</title> <link rel="stylesheet" type="text/css" href="20.css"> </head> <body> <div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="http://img4.duitang.com/uploads/item/201302/19/20130219133703_Zuvhd.gif"></a> <div class="desc"><a href="http://www.gzcc.cn/">校园女神</a></div> </div> </div> <div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="http://img3.duitang.com/uploads/item/201502/06/20150206215109_WakYn.gif"></a> <div class="desc"><a href="http://www.gzcc.cn/">校园男神</a></div> </div> </div> <div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="http://img5.duitang.com/uploads/item/201408/28/20140828161301_eYjHy.gif"></a> <div class="desc"><a href="http://www.gzcc.cn/">男生与女生</a></div> </div> </div> <div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="http://img4q.duitang.com/uploads/item/201502/06/20150206214131_5efzv.gif"></a> <div class="desc"><a href="http://www.gzcc.cn/">校园宿舍</a></div> </div> </div> <div class="clearfloat"> <img src="http://img4.duitang.com/uploads/item/201302/19/20130219133703_Zuvhd.gif"> <img src="http://img3.duitang.com/uploads/item/201502/06/20150206215109_WakYn.gif"> <img src="http://img5.duitang.com/uploads/item/201408/28/20140828161301_eYjHy.gif"> <img src="http://img4q.duitang.com/uploads/item/201502/06/20150206214131_5efzv.gif"> </div> </body> </html>img{ 400px; height: 300px; } div.img{ border: 1px solid cyan; 300px; height: 200px; float: left; margin: 5px; } div.img img{ 100%; height: 80%; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border: 2px solid yellow; } .clearfloat{ clear:both; }