- 认识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>广商</title> ???<link rel="stylesheet"type="text/css"href="../static/css/0082.css"></head><body><div> ???<div class="img"> ???????<a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> ???????????<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> ???????<div class="desc"><a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">校园风光</a></div> ???</div > ???????<div class="img"> ???????<a href=http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> ???????????<img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> ???????<div class="desc"><a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a></div> ???</div><div class="img"> ???????<a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> ???????????<img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> ???????<div class="desc"><a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频校园</a></div> ???</div> ???<div class="img"> ???????<a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> ???????????<img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> ???????<div class="desc"><a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a></div> ???</div></div><div class="clearfloat"> ???<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> ???<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> ???<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> ???<img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> ???</div></body></html>
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;}.clearfloat{ ???clear:both;}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/hxl316/p/7698785.html