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

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

30f9cc17acb243adb0dde75000dc2885

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

HTML代码如下

<div class=”tp-ads”>

  <div class=”tp-ads-list”>

    <a href=”http://www.xkwo.com/” target=”_blank” title=”” alt=””>

      <img src=”https://www.qzhan.vip/ads/1.png” alt=””>

    </a>

  </div>

  <div class=”tp-ads-list tp-ads-flex”>

    <a href=”http://www.xkwo.com/” target=”_blank” title=”” alt=””>

      <img src=”https://www.qzhan.vip/ads/1.png” alt=””>

    </a>

    <a href=”http://www.qzhan.vip/” target=”_blank” title=”” alt=””>

      <img src=”https://www.qzhan.vip/ads/1.png” alt=””>

    </a>

  </div>

  <div class=”tp-ads-list tp-ads-flex”>

    <a href=”http://www.xkwo.com/” target=”_blank” title=”” alt=””>

      <img src=”https://www.qzhan.vip/ads/1.png” alt=””>

    </a>

    <a href=”http://www.qzhan.vip/” target=”_blank” title=”” alt=””>

      <img src=”https://www.qzhan.vip/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代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!

希望大家搬砖时,留名(作者:百变鹏仔),喝水不忘挖井人!

© 版权声明
THE END
喜欢就支持一下吧
赞赏 分享