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

摘要:

Hello,大家好,我是小编鹏仔哥,之前写过很多各式各样的文字广告位代码,也都给大家免费分...

描述:

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

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

THE END
版权声明 1、本网站名称:黑猫查查网 - 查你所需,知你所想,资源分享平台
2、本站永久网址:https://www.hmccw.com
3、分享是一种美德,转载请保留原链接。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
文章不错?点个赞呗
点赞 0 赞赏 分享 收藏
随机推荐
评论 共 0 条

请登录后发表评论

暂无评论内容