CSS实例：图片导航块
- 认识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> <base target="_blank"> <link rel="stylesheet"type="text/css"href="text.css"> </head> <body> <div> <div class="pic"> <a href="http://www.iqiyi.com/v_19rrifgoyw.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01"> <img src="http://img21.mtime.cn/CMS/Gallery/2011/07/01/173936.86736747_900.jpg"></a> <div class="aa"><a href="http://www.iqiyi.com/v_19rrifgoyw.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">哈利波特与魔法石</a></div> </div> <div class="pic"> <a href="http://www.iqiyi.com/v_19rrifgpcx.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01"> <img src="http://img.bimg.126.net/photo/O9NvIsLiLVEe6Qm6zQjG_Q==/5702401553182072153.jpg"></a> <div class="aa"><a href="http://www.iqiyi.com/v_19rrifgpcx.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">哈利波特与密室</a></div> </div> <div class="pic"> <a href="http://www.iqiyi.com/v_19rrifgplc.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4073698086,1900035317&fm=27&gp=0.jpg"></a> <div class="aa"><a href="http://www.iqiyi.com/v_19rrifgplc.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">哈利波特与阿兹卡班的囚徒</a></div> </div> <div class="pic"> <a href="http://www.iqiyi.com/v_19rrifgpdf.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2448077391,705824826&fm=27&gp=0.jpg"></a> <div class="aa"><a href="http://www.iqiyi.com/v_19rrifgpdf.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">哈利波特与火焰杯</a></div> </div> <div class="clearfloat"> <img src="http://img21.mtime.cn/CMS/Gallery/2011/07/01/173936.86736747_900.jpg"> <img src="http://img.bimg.126.net/photo/O9NvIsLiLVEe6Qm6zQjG_Q==/5702401553182072153.jpg"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4073698086,1900035317&fm=27&gp=0.jpg"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2448077391,705824826&fm=27&gp=0.jpg"> </div> </div> </body> </html>
css
img{ width:300px; height:200px; } .pic{ border:1px solid black; width:200px; float:left; margin:5px; } .pic img{ width:100%; height:120px; } .aa{ text-align:center; padding:4px; } .pic:hover{ border:1px solid blue; } .clearfloat{ clear: both;
