<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>img</title><link rel="stylesheet" type="text/css" href="c2.css"></head><body><div class="recommend"><div class="img"><a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a><div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div></div><div class="img"><a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a><div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div></div><div class="img"><a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a><div class="desc"><a href="http://www.gzcc.cn">学校文化</a></div></div><div class="img"><a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a><div class="desc"><a href="http://www.gzcc.cn">全景校园</a></div></div></div></body></html>
img { ???width: 300px;}div .img { ???border: 1px solid #ccc; ???width: 180px; ???float: left; ???margin: auto;}div.img img { ???width: 100%; ???height: auto;}div.desc { ???text-align: center; ???padding: 5px;}div.img:hover { ???border: 1px solid #000000;}div.clearfloat { ???clear: both;}CSS实例：图片导航块
原文地址：http://www.cnblogs.com/lzp963/p/7698669.html