图片广告位代码 单排长图广告与双排图片广告代码
Hello,大家好,我是Q站小编鹏仔哥,之前写过很多各式各样的文字广告位代码,也都给大家免费分享了,也得到大家的一致好评,本次鹏仔的微信群一位站长需要图片广告位代码,就是长图一排展示或者一排展示两个的,这个刚好鹏仔之前就写好了,不过一直懒得发布,今天勤快一下吧。(自适应PC端与电脑端)
HTML代码如下
CSS代码如下
使用方法:将HTML和CSS代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!
希望大家搬砖时,留名(作者:百变鹏仔),喝水不忘挖井人!
【有需要加入微信站长百人群的,看我4414签名】
HTML代码如下
- <div class="tp-ads"> <div class="tp-ads-list"> <a target="_blank" title="" alt="">
</a> </div> <div class="tp-ads-list tp-ads-flex"> <a target="_blank" title="" alt=""> </a> <a target="_blank" title="" alt=""> </a> </div> <div class="tp-ads-list tp-ads-flex"> <a target="_blank" title="" alt=""> </a> <a target="_blank" title="" 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代码复制后放置需要展示的地方,然后更换图片与广告链接即可,需要几行广告复制几行即可!
希望大家搬砖时,留名(作者:百变鹏仔),喝水不忘挖井人!
【有需要加入微信站长百人群的,看我4414签名】