图片广告位代码 单排长图广告与双排图片广告代码-百变鹏仔
<p> Hello，大家好，我是小编鹏仔哥，之前写过很多各式各样的文字广告位代码，也都给大家免费分享了，也得到大家的一致好评，本次鹏仔的站长微信群一位站长需要图片广告位代码，就是长图一排展示或者一排展示两个的，这个刚好鹏仔之前就写好了<a href="https://www.qzhan.vip/post/10258.html" target="_blank" rel="noopener"> </a>，不过一直懒得发布，今天勤快一下吧。</p><p style="text-align: center;"></p>
<p>效果如上图所示，适应手机端！</p>
<p>HTML代码如下</p>
<pre class="prism-highlight prism- prism-line-numbers language-markup" data-language="Markup"><code><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></code></pre>
<p>CSS代码如下</p>
<pre class="prism-highlight prism- prism-line-numbers language-css" data-language="CSS"><code><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></code></pre>
<p> </p>
<p>使用方法：将HTML和CSS代码复制后放置需要展示的地方，然后更换图片与广告链接即可，需要几行广告复制几行即可！</p>
<p>希望大家搬砖时，留名（作者：百变鹏仔），喝水不忘挖井人！</p>
页:
[1]