- 认识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：clea
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" type="text/css" href="../残血/css/66.css"></head><body><div class="logo"> ???<div class="small"> ???????<a href="https://baidu.com/"> ???????????<img src="http://pic32.photophoto.cn/20140828/0005018374536396_b.jpg"></a> ???????<div class="describe"><a href="https://baidu.com/">英雄联盟</a></div> ???</div> ???<div class="small"> ???????<a href="https://baidu.com/"> ???????????<img src="http://imgsrc.baidu.com/imgad/pic/item/5fdf8db1cb134954a6673ab05c4e9258d0094aed.jpg"></a> ???????<div class="describe"><a href="https://baidu.com/">雷霆咆哮</a></div> ???</div> ???<div class="small"> ???????<a href="https://https://baidu.com/"> ???????????<img src="http://pic.qiantucdn.com/58pic/18/41/26/561c5c2c554d7_1024.jpg"></a> ???????<div class="describe"><a href="https://baidu.com/">寒冰射手</a></div> ???</div> ???<div class="small"> ???????<a href="https://baidu.com/"> ???????????<img src="http://imagscdn.3234.com/attaches/23/07/76798-f8MShl.jpg"></a> ???????<div class="describe"><a href="https://baidu.com/">诺克萨斯之手</a></div></div> ???<div class="clean"> ???????<img src="http://pic32.photophoto.cn/20140828/0005018374536396_b.jpg"> ???????<img src="http://imgsrc.baidu.com/imgad/pic/item/5fdf8db1cb134954a6673ab05c4e9258d0094aed.jpg"> ???????<img src="http://pic.qiantucdn.com/58pic/18/41/26/561c5c2c554d7_1024.jpg"> ???????<img src="http://imagscdn.3234.com/attaches/23/07/76798-f8MShl.jpg"></div></body></html>
img{ ???????????width: 100px; ???????} ??????div .img{ ???????????width: 100px; ???????????border: 1px solid #eeeeee; ???????????float: left; ???????????margin: 15px; ???????} ???????div.img img{ ???????????width: 100%; ???????????height: auto; ???????} ???????div.desc{ ???????????text-align: center; ???????????padding: 15px; ???????} ???????div.img:hover{ ???????????border: 1px solid #222222; ???????} ???????.clearfloat{ ???????????clear: both;
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/xiepingjian/p/7701316.html