- 认识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>cartoon</title> ???<link rel="stylesheet" type="text/css" href="ch1.css"></head><body> ????<div> ????????<div class="img"> ????????????<a href="http://www.baidu.com/"> ????????????????<img src="https://i1.mifile.cn/a4/xmad_15084925480051_wxbcg.jpg"></a> ????????<div class="desc"><a href="http://www.baidu.com/">小米5X</a></div> ????????</div> ????</div> ?????????<div> ????????<div class="img"> ????????????<a href="http://www.baidu.com/"> ????????????????<img src="https://i1.mifile.cn/a4/xmad_15067798057483_gquZc.jpg"></a> ????????????<div class="desc"><a href="http://www.baidu.com/">红米Note 5A</a></div> ????????</div> ????</div> ????<div> ????????<div class="img"> ????????????<a href="http://www.baidu.com/"> ????????????????<img src="https://i1.mifile.cn/a4/xmad_15060802506328_pqtZl.jpg"></a> ????????????<div class="desc"><a href="http://www.baidu.com/">米兔智能故事机</a></div> ????????</div> ????</div> ????<div> ????????<div class="img"> ????????????<a href="http://www.baidu.com/"> ????????????????<img src="https://i1.mifile.cn/a4/xmad_15084688880977_tjRVO.jpg"></a> ????????????<div class="desc"><a href="http://www.baidu.com/">小米电视</a></div> ????????</div> ????</div> ????<div class="clearfloat"><img src="https://i1.mifile.cn/a4/xmad_15084925480051_wxbcg.jpg"><img src="https://i1.mifile.cn/a4/xmad_15067798057483_gquZc.jpg"><img src="https://i1.mifile.cn/a4/xmad_15060802506328_pqtZl.jpg"><img src="https://i1.mifile.cn/a4/xmad_15084688880977_tjRVO.jpg"> </div></body></html>
img{ ???width: 300px; ???height: 200px;}div.img{ ???border: 1px solid hotpink; ???width: 200px; ???height: 180px; ???float: left; ???margin: 5px;}div.img img{ ???width: 100%; ???height: 80%;}div.desc{ ???text-align: center; ???padding: 5px;}div.img:hover{ ???border: 2px solid cornflowerblue;}.clearfloat{ ???clear:both;}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/834477300j/p/7701356.html