效果图
下面是源码哦
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片列表</title> <style type="text/css"> .pic_list_con { width: 958px; border: 1px solid #666; margin: 50px auto 0; } .pic_list_title { width: 918px; height: 50px; /*标题整体底部线*/ border-bottom: 1px solid #666666; /*整体居中*/ margin: 0 auto; } .pic_list_title h3 { float: left; font: normal 18px/50px 'Microsoft Yahei'; margin: 0; padding: 0 10px; border-bottom: 2px solid red; } .pic_list_wrap { width: 918px; margin: 20px auto 13px; overflow: hidden; } .pic_list { list-style: none; padding: 0; width: 950px; margin: 0; overflow: hidden; } .pic_list li { width: 160px; height: 168px; float: left; margin: 0 29px 25px 0; } </style></head><body><div="pic_list_con"> <div="pic_list_title"> <h3>一群跳舞的小黄鸭</h3> </div> <div="pic_list_wrap"> <ul="pic_list"> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> <li><a href="#"><img src="images/xhy.gif" alt="小黄鸭"></a></li> </ul> </div></div></body></html>
