- 认识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>picture</title> ???<link rel="stylesheet" href="static/css/123.css"></head><body><div class="recommend"> ???<div class="img"> ???????<a href="http://www.gzcc.cn/"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3415268798,1784895878&fm=27&gp=0.jpg"></a> ???????<div class="desc"><a href="http://www.baidu.com/">搜索一下</a></div> ???</div> ???<div class="img"> ???????<a href="http://www.gzcc.cn/"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2131081421,574535245&fm=27&gp=0.jpg"></a> ???????<div class="desc"><a href="http://www.baidu.com/">搜索两下</a></div> ???</div> ???<div class="img"> ???????<a href="http://www.gzcc.cn/"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4185001745,988918659&fm=27&gp=0.jpg"></a> ???????<div class="desc"><a href="http://www.baidu.com/">搜索三下</a></div> ???</div></div><div class="clearfloat"> ???????<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3415268798,1784895878&fm=27&gp=0.jpg"><br> ???????<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2131081421,574535245&fm=27&gp=0.jpg"><br> ???????<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4185001745,988918659&fm=27&gp=0.jpg"><br></div></body></html>
img { ???width: 300px;}div.img { ???border: 1px solid #ccc; ???width: 150px; ???float: left; ???margin: 5px;}div.img img { ???width: 100%; ???height: auto;}div.desc{ ???text-align: center; ???padding: 5px;}div.clearfloat{ ???clear: both;}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/123hi/p/7697946.html