标签：学生 ges 新建 文字 分享 meta demo doctype enter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <link rel="stylesheet" type="text/css" href="../static/css/111.css"> </head> <body> <div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="http://static.runoob.com/images/demo/demo4.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://static.runoob.com/images/demo/demo3.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://static.runoob.com/images/demo/demo2.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://static.runoob.com/images/demo/demo1.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn">学生风采</a></div> </div> </div> <div class="clearfloat"> <img src="http://static.runoob.com/images/demo/demo4.jpg" > <img src="http://static.runoob.com/images/demo/demo3.jpg" > <img src="http://static.runoob.com/images/demo/demo2.jpg" > <img src="http://static.runoob.com/images/demo/demo1.jpg" > </div> </body> </html>
css;
img{ width: 300px; } div.img{ border: 1px solid #cccccc; width: 180px; float:left; margin:5px; } div.img img{ width: 100%; height: auto; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border: 1px solid #777777; } .clearfloat{ clear: both; }
标签：学生 ges 新建 文字 分享 meta demo doctype enter
原文地址：http://www.cnblogs.com/wujialing/p/7698722.html
