<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"><head> ???<meta charset="UTF-8"> ???<title>喵喵</title> ???<link rel="stylesheet" ?type="text/css" href="../static/css/styles.css"></head><body> ???<div class="recommend"> ???????<div class="img"> ???????????<a href="http://www.weibo.com/littlesundayday"><img src="http://wx2.sinaimg.cn/mw690/bde8475dgy1fkfhy0ed9vj21w01w07wh.jpg"></a> ???????????<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>日</div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.weibo.com/littlesundayday"><img src="http://wx3.sinaimg.cn/mw690/bde8475dgy1fkfhy1u1v7j21w01w07wh.jpg"></a> ???????????<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>常</div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.weibo.com/littlesundayday"><img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhxyq664j21w01w07wh.jpg"></a> ???????????<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>丧</div> ???????</div> ???????<div class="img"> ???????????<a href="http://www.weibo.com/littlesundayday"><img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhycnx51j21w01w07wh.jpg"></a> ???????????<div class="desc"><a href="http://www.weibo.com/littlesundayday"></a>气</div> ???????</div> ???</div> ???<div class="clearfloat"> ???????<a href="http://www.weibo.com/littlesundayday"><img src="http://wx2.sinaimg.cn/mw690/bde8475dgy1fkfhy0ed9vj21w01w07wh.jpg" alt="1"></a><br> ???????<img src="http://wx3.sinaimg.cn/mw690/bde8475dgy1fkfhy1u1v7j21w01w07wh.jpg"><br> ???????<img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhxyq664j21w01w07wh.jpg"><br> ???????<img src="http://wx1.sinaimg.cn/mw690/bde8475dgy1fkfhycnx51j21w01w07wh.jpg"><br> ???</div></body></html>
img { ???width:300px;} ???div.img{ ???border:1px solid #ccc; ???width:230px; ???float:left; ???margin:5px;} ???div.img img{ ???width:100%; ???height:auto;} ???/*字体居中*/ ???div.desc{ ???text-align:center; ???padding: 5px;} ???/*清除浮动*/ ???div.clearfloat{ ???????clear: both; ???} ???/*碰到图变成黑框*/ ???div.img:hover{ ???????border: 1px solid #111111; ???}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/qianshu/p/7697952.html