- 认识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>omg</title> ???<link rel="stylesheet" type="text/css" href="../static/css/202.css"></head><body><div > ??<div ?class="img" > ??<a href=""> ??????????<img src="http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"></a> ??????<div class="desc"><a href="">丹东风景</a></div></div> ??<div class="img"> ??????<a href=""> ??????<img src="http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> ??????<div class="desc"><a href="">毛里求斯风景</a></div></div> ????????<div class="img"> ?????????<a href=""> ??????????<img src="http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"></a> ????????<div class="desc"><a href="">九龙潭风景</a></div> </div> ???<div ?class="img" > ???????<a href=""> ???????????<img src="http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"></a> ??????<div class="desc"><a href="">香港风景</a></div> ????</div> ??</div><div class="clearfloat"> ???<img src="http://file26.mafengwo.net/M00/7E/E5/wKgB4lIuf3SAYD0bABI2F295q_Q73.jpeg"> ???<img src="http://file25.mafengwo.net/M00/FB/10/wKgB4lNwQ1eAXFr1AALE2JpaC-E02.jpeg"> ???<img src="http://img1.qunarzz.com/travel/d2/201212/01/49eae9eeea2afb89ddb12cfb.jpg_r_480x360x95_ed9e0971.jpg"> ???<img src="http://file20.mafengwo.net/M00/87/12/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"></div></body></html>
img{ ???width:300px;}div.img{ ????border:1px solid #cccccc; ????width:180px; ????height:150px; ????float:left; ????margia:5px;}div.img img{ ???width:100%; ???height:80%;}div.desc{ ???text-align:center; ???padding:5px;}div.img:hover{border:1px solid #777777;}.cleater float{ ?clear:both;}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/caoxinwen092/p/7698759.html