1.认识CSS的 盒子模型。
2.CSS选择器的灵活使用。
3.实例:
a.图片文字用div等元素布局形成HTML文件。
b.新建相应CSS文件，并link到html文件中。
c.CSS文件中定义样式
a)div.img：border,margin,width,float
b)div.img img：width，height
c)div.desc：text-align,padding
d)div.img:hover：border
e)div.clearfloat：clear
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>维尼熊</title> ???<link rel="stylesheet" type="text/css" href="../static/10/20.css"></head><body> ???<div> ???????<div class="img"> ???????????<a href="https://baike.so.com/doc/6087123-6300228.html"> ???????????????<img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg" ></a> ?????????<div><a href="https://baike.so.com/doc/6087123-6300228.html">维尼简介</a></div> ???????</div> ???<div> ???????<div class="img"> ???????????<a href="https://baike.so.com/doc/4326998-4531580.html"> ?????????????<img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"></a> ???????????<div><a href="https://baike.so.com/doc/4326998-4531580.html">维尼与蜂蜜</a></div></div> ???<div> ???????<div class="img"> ???????????<a href="http://wenda.so.com/q/1364865961066962?src=150"> ?????????????<img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg";></a> ???????????<div><a href="http://wenda.so.com/q/1364865961066962?src=150">维尼的朋友</a></div></div> ???<div> ???????<div class="img"> ???????????<a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea"> ?????????????<img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"></a> ???????????<div><a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea">维尼日常</a></div></div> ???<div class="clearfloat"> ????<img src="http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg"> ????<img src="http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"> ????<img src="http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg"> ?????<img src="http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"> ???</div></body></html>
???img{ ???????width: 300px; ???} ???div.img{ ???????border:1px solid #EEEEEE; ???????width:180px; ???????float: left; ???????margin: 5px; ???} ???div.img img{ ???????width:100%; ???????height: auto; ???} ???div.desc{ ???????text-align: center; ???????padding: 5px; ???} ???div.img:hover{ ???????border: 2px solid darkturquoise; ???} ???.clearfloat{ ???????????clear: both; ???????}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/892356821qqcom/p/7699144.html