- 认识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>img</title> ???<link rel="stylesheet" type="text/css" href="../static/css/20.css"></head><body><div> ???<div class="img"> ???????<a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031679&di=ff1b37b2f4b046bb6b035f800fcc1400&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100923%2F4845745_011226734994_2.jpg"></a> ???????<div class="desc"><a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C">流行歌曲</a></div> ???</div> ???<div class="img"> ???????<a href="http://music.163.com/#/playlist?id=105393276"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031677&di=1179157de7164fa75c56875751209545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F50%2F48%2F20P58PICesf.jpg"></a> ???????<div class="desc"><a href="http://music.163.com/#/playlist?id=105393276">零零年代曲</a></div> ???</div> ???<div class="img"> ???????<a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=623a8822585eb7e98099f5b646b2243c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F13%2F36%2F87A58PICdZ6_1024.jpg"></a> ???????<div class="desc"><a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E">欧美Hits</a></div> ???</div> ????<div class="img"> ???????<a href="http://music.163.com/#/playlist?id=23043140"> ???????????<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=0f421a2aaf8a7d441fd6eebfb9019105&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv1%2F93%2Fd%2F87.jpg"></a> ???????<div class="desc"><a href="http://music.163.com/#/playlist?id=23043140">九十年代四大天王</a></div> ???</div></div><div class="clearfloat"> ???<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031679&di=ff1b37b2f4b046bb6b035f800fcc1400&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100923%2F4845745_011226734994_2.jpg"> ???<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031677&di=1179157de7164fa75c56875751209545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F50%2F48%2F20P58PICesf.jpg"> ???<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=623a8822585eb7e98099f5b646b2243c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F13%2F36%2F87A58PICdZ6_1024.jpg"> ???<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=0f421a2aaf8a7d441fd6eebfb9019105&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv1%2F93%2Fd%2F87.jpg"></div></body></html>
img{ ???width: 300px; ???height: 200px;}div.img{ ???border: 1px solid #cccccc; ???width: 180px; ???height: 160px; ???float: left; ???margin: 5px;}div.img img{ ???width: 100%; ???height:80%;}div.desc{ ???text-align: center; ???padding: 5px;}div.img:hover{ ???border: 1px solid #777777;}div.clearfloat{ ???clear: both;}
CSS实例：图片导航块
原文地址：http://www.cnblogs.com/lqx12/p/7698739.html