1.认识CSS的 盒子模型。
2.CSS选择器的灵活使用。
3.实例:
- 图片文字用div等元素布局形成HTML文件。
- 新建相应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.div.clearfloat：clear
<!DOCTYPE html><html lang="SONG"><head> ???<meta charset="UTF-8"> ???<title>MY</title> ???<link rel="stylesheet" type="text/css" href="../static/css/20.css"></head><body> ??<div class="desc" > ???????<div class="img" > ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg"> ???????????</a> ???????????<div><a href="http://www.gzcc.cn/">校园风光</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://img0.imgtn.bdimg.com/it/u=1878159448,3960376758&fm=27&gp=0.jpg"></a> ???????????????<div><a href="http://www.gzcc.cn/">精彩时刻</a></div> ???????</div> ???????<div class="img" class="clearfloat" class="img-hover"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://img1.imgtn.bdimg.com/it/u=2023026197,2608893258&fm=27&gp=0.jpg"></a> ???????????????<div><a href="http://www.gzcc.cn/">双十一</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg"></a> ???????????????<div><a href="http://www.gzcc.cn/">回眸一笑</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://pic.jj20.com/up/allimg/911/0G516013J7/160G5013J7-8.jpg"></a> ???????????????<div><a href="http://www.gzcc.cn/">回眸一笑</a></div> ???????</div> ???????????????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://img2.niutuku.com/1312/0824/0824-niutuku.com-12604.jpg"></a> ???????????????<div><a href="http://www.gzcc.cn/">回眸一笑</a></div> ???????</div> ???</div> ???<div class="clearfloat"> ???????<img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg"> ???????<img src="http://pic.jj20.com/up/allimg/911/0G516013J7/160G5013J7-8.jpg"> ???????<img src="http://img1.imgtn.bdimg.com/it/u=2023026197,2608893258&fm=27&gp=0.jpg"> ???????<img src="http://img1.imgtn.bdimg.com/it/u=236753405,4180705614&fm=27&gp=0.jpg"> ???????<img src="http://img2.niutuku.com/1312/0824/0824-niutuku.com-12604.jpg"> ???????<img src="http://img0.imgtn.bdimg.com/it/u=1878159448,3960376758&fm=27&gp=0.jpg"> ???</div></body>
img{ ???????????width: 300px; ???????} ??????div .img{ ???????????width: 200px; ???????????border: 1px solid #eeeeee; ???????????float: left; ???????????margin: 15px; ???????} ???????div.img img{ ???????????width: 100%; ???????????height: auto; ???????} ???????div.desc{ ???????????text-align: center; ???????????padding: 15px; ???????} ???????div.img:hover{ ???????????border: 1px solid #222222; ???????} ???????.clearfloat{ ???????????clear: both; ???????}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/blackboardf/p/7701341.html