网站图片广告位代码

大家好，我是爱分享。我之前写过很多各种文字广告位代码，免费分享给大家，也得到了大家的好评。这次爱分享微信群的一个站长需要一个图片广告位码，就是一个长图一排或者两排展示。这正好是爱分享以前写的，不过我一直懒得发表。今天勤快一点，发出来把。

效果如上图所示，适应手机端！

HTML代码如下

<div class="tp-ads">

  <div class="tp-ads-list">
    <a href="http://www.afxw5.com/" target="_blank" title="" >
      <img src="https://www.qzhan.vip/ads/1.png" >
    </a>
  </div>

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

  <div class="tp-ads-list tp-ads-flex">
    <a href="http://www.afxw5.com/" target="_blank" title="" >
      <img src="https://www.qzhan.vip/ads/1.png" >
    </a>
    <a href="http://www.qzhan.vip/" target="_blank" title="" >
      <img src="https://www.qzhan.vip/ads/1.png" >
    </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代码复制后放置需要展示的地方，然后更换图片与广告链接即可，需要几行广告复制几行即可！