<!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; }
原文：http://www.cnblogs.com/lzp963/p/7698669.html