1.认识CSS的 盒子模型。
2.CSS选择器的灵活使用。
3.实例:
a.图片文字用div等元素布局形成HTML文件。
b.新建相应CSS文件，并link到html文件中。
c.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="en"><head> ???<meta charset="UTF-8"> ???<title>海绵宝宝</title> ???<link rel="stylesheet"type="text/css"href="bbb.css"></head><body><div> ???<div class="js"> ???????<a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html"> ???????????<img src="http://p2.so.qhimgs1.com/bdr/_240_/t01be8bb2970943347e.jpg"></a> ???????<div class="aa"><a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html">第一季</a></div> ???</div> ???<div class="js"> ???????<a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html"> ???????????<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01b77032aeaa56c9b0.jpg"></a> ???????<div class="aa"><a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html">第二季</a></div> ???</div> ???<div class="js"> ???????<a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html"> ???????????<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01caee8f397eef076d.jpg"></a> ???????<div class="aa"><a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html">第三季</a></div> ???</div> ???<div class="js"> ???????<a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html"> ???????????<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e74b11e1fa409bad.jpg"></a> ???????<div class="aa"><a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html">第四季</a></div> ???</div><div class="clearfloat"> ???<img src="http://p2.so.qhimgs1.com/bdr/_240_/t01be8bb2970943347e.jpg"> ???<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01b77032aeaa56c9b0.jpg"> ???<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01caee8f397eef076d.jpg"> ???<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e74b11e1fa409bad.jpg"></div></div></body></html>
img{width:300px;height:200px;}.js{border:1px solid black;width:200px;float:left;margin:5px;}.js img{width:100%;height:100px;}.aa{text-align:center;padding:5px;}.js:hover{ ???border:1px solid blue;}.clearfloat{ ???clear: both;CSS实例：图片导航块
原文地址：http://www.cnblogs.com/JaTae/p/7699149.html