Q站资源网
当前位置:网站首页 > 最近更新 > 免费技术 > 网站建设 > 正文

图片广告位代码 单排长图广告与双排图片广告代码

作者:百变鹏仔日期:2023-04-25 22:23:26浏览:676分类:网站建设

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


图片广告位代码 单排长图广告与双排图片广告代码

广告效果预览


HTML代码如下

<div class="tp-ads">

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

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

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

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


技术协助:鹏仔QQ:344225443

爱Q站
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们(管理员邮箱:344225443@qq.com),情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯