- 认识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>二十一世纪传奇大戏</title> ???<link rel="stylesheet" type="text/css" href="../static/css/text.css"></head><body><div style=" color:darkcyan;font-weight: bold;font-style: italic;font-size: 30px;text-align: center">二十一世纪传奇大戏</div><hr><div> ???<div class="img" > ???????<a ?href="http://www.le.com/tv/73868.html"> ???????????<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01ca5d35b6beab0380.jpg"></a> ???????<div class="desc"> <a href="http://www.le.com/tv/73868.html">甑嬛传</a> </div> ???</div> ????<div class="img"> ???????<a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html"> ????????????<img src="http://p4.so.qhimgs1.com/bdr/_240_/t01a7eca4a94e310414.jpg"></a> ???????<div ?class="desc"> ?<a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html">锦绣未央</a> </div> ???</div> ???<div class="img"> ???????<a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd"> ??????????????<img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b9c3265ecd2b4a33.png"></a> ???????<div class="desc"> <a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd">楚乔传</a> </div> ???</div> ???<div class="img"> ???????<a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd"> ???????????????<img src="http://p5.so.qhimgs1.com/bdr/_240_/t015489f3483ba6f42b.jpg"></a> ???????<div class="desc"> <a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd">三生三世十里桃花</a> </div> ???</div></div><div class="clearfloat"> ???<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01ca5d35b6beab0380.jpg"> ???<img src="http://p4.so.qhimgs1.com/bdr/_240_/t01a7eca4a94e310414.jpg"> ???<img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b9c3265ecd2b4a33.png"> ???<img src="http://p5.so.qhimgs1.com/bdr/_240_/t015489f3483ba6f42b.jpg"></div></body></html>
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>二十一世纪传奇大戏</title> ???<link rel="stylesheet" type="text/css" href="../static/css/text.css"></head><body><div style=" color:darkcyan;font-weight: bold;font-style: italic;font-size: 30px;text-align: center">二十一世纪传奇大戏</div><hr><div> ???<div class="img" > ???????<a ?href="http://www.le.com/tv/73868.html"> ???????????<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01ca5d35b6beab0380.jpg"></a> ???????<div class="desc"> <a href="http://www.le.com/tv/73868.html">甑嬛传</a> </div> ???</div> ????<div class="img"> ???????<a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html"> ????????????<img src="http://p4.so.qhimgs1.com/bdr/_240_/t01a7eca4a94e310414.jpg"></a> ???????<div ?class="desc"> ?<a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html">锦绣未央</a> </div> ???</div> ???<div class="img"> ???????<a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd"> ??????????????<img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b9c3265ecd2b4a33.png"></a> ???????<div class="desc"> <a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd">楚乔传</a> </div> ???</div> ???<div class="img"> ???????<a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd"> ???????????????<img src="http://p5.so.qhimgs1.com/bdr/_240_/t015489f3483ba6f42b.jpg"></a> ???????<div class="desc"> <a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd">三生三世十里桃花</a> </div> ???</div></div><div class="clearfloat"> ???<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01ca5d35b6beab0380.jpg"> ???<img src="http://p4.so.qhimgs1.com/bdr/_240_/t01a7eca4a94e310414.jpg"> ???<img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b9c3265ecd2b4a33.png"> ???<img src="http://p5.so.qhimgs1.com/bdr/_240_/t015489f3483ba6f42b.jpg"></div></body></html>
img{ ???width: 300px; ???height: 200px;}.img{ ???border:1px solid skyblue; ???width: 200px; ???height: 150px; ???float: left; ???margin: 5px;}.img img{ ???width:100%; ???height: 80%;}.desc{ ???text-align:center; ???padding: 5px;}.img:hover{ ???border: 1px solid blue;}.clearfloat{ ???clear: both;}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/1996liuda/p/7699652.html