CSS实例：图片导航块
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;
