ul li 图片列表 css代码

    <ul class="k_img_ul">
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
     <li><span><a href="#"><img src="chanpin.jpg" /></a></span><p>江苏冠美家具</p></li>
      
     <br class="clear" />
     </ul>

 

　　这是图片列表

     <style type="text/css">
      
     .k_img_ul{ float:left; width:1000px; padding:12px 0 0 0; }/*通过这个ul来控制这个部分与外部的距离*/
     .k_img_ul li{ float:left; width:180px; padding:0 70px; text-align:center;}
     .k_img_ul li span{ width:250px; height:180px; padding:2px; display:block; border:1px solid #ccc; }/*如果不带边框可以不要这个span*/
     .k_img_ul li span a{ display:block; width:250px; height:180px; overflow:hidden; }/*重点是红色部分*/
     .k_img_ul li span a img{width:250px; height:180px; } /*一般图片只设宽度*//*当需要使长长于53,而宽小于53的图片垂直居中时把这一句注释掉*/
     .k_img_ul p{ height:12px; line-height:12px;}
     </style>

这是样式css代码

 

 

这是最终样式

兼容性稳定