CSS文件
div.mg{
300px;
border: 2px solid #ccc;
float: left;
margin:5px;
}
div.mg img{
100%;
height: auto;
}
#dese{
text-align: center;
padding: 5px;
}
div.img:hover{
border: 1px solid #000000;
}
div.clearfloat{
clear: both;
}
内容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="./static/shabi/waibuziyuan.css">
</head>
<body>
<div>
<div class="mg">
<a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/">学校荣誉</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/">师生获奖</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">领导关怀</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">数字广商</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">画说校园</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">视频校园</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">全景校园</a></div>
</div>
<div class="mg">
<a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
<div id="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">校友风采</a></div>
</div>
</div>
</body>
</html>
