- 认识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/111.css"></head><body> ???<div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://static.runoob.com/images/demo/demo4.jpg"></a> ???????????<div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://static.runoob.com/images/demo/demo3.jpg"></a> ???????????<div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://static.runoob.com/images/demo/demo2.jpg"></a> ???????????<div class="desc"><a href="http://www.gzcc.cn">学校文化</a></div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.gzcc.cn/"> ???????????????<img src="http://static.runoob.com/images/demo/demo1.jpg"></a> ???????????<div class="desc"><a href="http://www.gzcc.cn">学生风采</a></div> ???????</div> ???</div> ???<div class="clearfloat"> ??????<img src="http://static.runoob.com/images/demo/demo4.jpg" > ??????<img src="http://static.runoob.com/images/demo/demo3.jpg" > ??????<img src="http://static.runoob.com/images/demo/demo2.jpg" > ??????<img src="http://static.runoob.com/images/demo/demo1.jpg" > ???</div></body></html>
css;
???img{ ???????width: 300px; ????} ???div.img{ ???????border: 1px solid #cccccc; ???????width: 180px; ???????float:left; ???????margin:5px; ???} ???div.img img{ ???????width: 100%; ???????height: auto; ???} ???div.desc{ ???????text-align: center; ???????padding: 5px; ???} ???div.img:hover{ ???????border: 1px solid #777777; ???} ???.clearfloat{ ???????clear: both; ???}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/wujialing/p/7698722.html