建站代码网

热门标签

ul li 图片列表 css代码

 

     <ul class="k_img_ul">

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></a></span><p>江苏冠美家具</p></li>

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></a></span><p>江苏冠美家具</p></li>

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></a></span><p>江苏冠美家具</p></li>

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></a></span><p>江苏冠美家具</p></li>

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></a></span><p>江苏冠美家具</p></li>

     <li><span><a href="#"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20640'%3E%3C/svg%3E" loading='lazy' data-lazy-src="http://1.com/skin/default/image/nopic.gif" /></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; }

     .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; }

     .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; }

     .k_img_ul p{ height:12px; line-height:12px;}

     </style>

 

这是样式css代码

这是最终样式

 

兼容性稳定

热门信息

X