ul li 图片列表 css代码

Html 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代码
这是最终样式
 
兼容性稳定

相关内容推荐

JQ特效之:页面向上滚动时弹出模块

页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个

返回
顶部