图片广告位代码 单排长图广告与双排图片广告代码-百变鹏仔

小伙子 技术教程 0
  • 围观人数:184
  •     Hello,大家好,我是小编鹏仔哥,之前写过很多各式各样的文字广告位代码,也都给大家免费分享了,也得到大家的一致好评,本次鹏仔的站长微信群一位站长需要图片广告位代码,就是长图一排展示或者一排展示两个的,这个刚好鹏仔之前就写好了 ,不过一直懒得发布,今天勤快一下吧。


    效果如上图所示,适应手机端!

    HTML代码如下

    <div class="tp-ads">    <div class="tp-ads-list">     <a href="http://www.jumawu.com/" target="_blank" title="" alt="">       <img src="https://www.ctrb365.com/ads/1.png" alt="">     </a>   </div>    <div class="tp-ads-list tp-ads-flex">     <a href="http://www.jumawu.com/" target="_blank" title="" alt="">       <img src="https://www.ctrb365.com/ads/1.png" alt="">     </a>     <a href="http://www.jumawu.com/" target="_blank" title="" alt="">       <img src="https://www.ctrb365.com/ads/1.png" alt="">     </a>   </div>    <div class="tp-ads-list tp-ads-flex">     <a href="http://www.jumawu.com/" target="_blank" title="" alt="">       <img src="https://www.ctrb365.com/ads/1.png" alt="">     </a>     <a href="http://www.jumawu.com/" target="_blank" title="" alt="">       <img src="https://www.ctrb365.com/ads/1.png" alt="">     </a>   </div>  </div>


    CSS代码如下

    <style type="text/css">   .tp-ads{     width: 100%;     margin-top: 6px;   }   .tp-ads-list{     width: 100%;   }   .tp-ads-list a{     display: block;     width: 100%;   }   .tp-ads-list img{     width: 100%;     height: 70px;     margin: 4px 0;   }   .tp-ads-flex{     display: flex;     align-items: center;     justify-content: space-between;   }   .tp-ads-flex a{     width: 49.8%;   }    @media screen and (max-width: 1000px){     .tp-ads-list img{       width: 100%;       height: 25px;     }   } </style>


     

    使用方法:将HTML和CSS代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!

    相关文章

    免责声明

    本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。敬请谅解!