本站资源来自互联网收集发布,如有侵权之处不妥,请联系QQ:2379717577删除,敬请谅解。

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

孤酒小编 技术学习
扫码手机访问

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

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

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代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!

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

标签:

暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:

同类推荐
评论列表
签到
热门文章
随机推荐
最新评论