目录
wordpress网站主题广告布局代码,zibll子比主题首页广告布局默认双端显示,可自行更改仅PC端显示或者仅移动端显示,zibll子比主题完美适应,样式图片加文字美观大气。

部署教程
[hidecontent type="reply"]
照子比主题的教程来,直接将代码放到:后台-外观-小工具-自定义HTML即可
<style>
@media screen and (max-width: 1000px) {
.pc-wobbt {
display: none;
}
}
/* pc-wobbt 仅PC端显示 根据需求改放图片盒子代码
<div class="wobbt-img pc-wobbt"> */
@media screen and (min-width: 1000px) { .m-wobbt{display:none; }}
/* m-wobbt 仅移动端显示 根据需求该放图片盒子代码
<div class="wobbt-img m-wobbt"> */
.zib-widget{
padding: 10px;}
/*设置zibll主题内容整体间距*/
.wobbt{
width: 100%;}
.wobbt::after{
content: '';
display: block;
height: 0;
visibility:hidden;
clear: both;
}
/*解决float的浮动问题,方便,因为直接在父级div的css这里添加如下样式*/
.wobbt-left{
width: 49.5%;
float: left; /*盒子左对齐*/
margin-right: 1%;
}
/*大盒子里面左边盒子*/
.wobbt-right{
width: 49.5%;
float: left; /*盒子右对齐*/
}
/*大盒子里面右边盒子*/
.wobbt-img{
width: 100%;
height: auto;
max-height: 80px;
min-height: 45px;
margin-bottom: 8px; /*图片盒子上下间隔*/
overflow: hidden; /*设置图片放大不超过图片盒子*/
}
/*放图片专用盒子*/
.wobbt-img img{
width: 100%;
height: auto;
max-height: 80px;
min-height: 45px;
border-radius: 6px; /*圆角角度*/
transition: all .2s ease .1s; /*光标放到图片上的放大时间*/
}
/*对放图片盒子配置样式*/
.wobbt-img img:hover{
transform: scale(1.03);
}
.wobbt-img-dapeng img:hover{
transform: scale(1.03);
}
/*设置光标放到图片放大的倍数*/
td{
width: 20%;
}
/*单元格宽度*/
</style>
<!--图片广告-->
<div class="wobbt">
<div class="wobbt-img">
<a href="https://网站地址
" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="横幅广告图1" height="100px"></a>
</div>
<div class="wobbt-left">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图2" height="100px"></a>
</div>
</div>
<!--左右小图-->
<div class="wobbt-right">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图2" height="100px"></a>
</div>
</div>
<!--文字广告-->
<table style="text-align:center;width:100%;margin-bottom: 10px;" cellspacing="0" cellpadding="0" bordercolor="#99999" border="1" bgcolor="#F8F8FF" align="center"><tbody><tr><td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#0000FF;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span> </a> </td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#0000FF;">文字广告位招租中</span></a></td>
</tr>
<!--第一列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#970de1;">文字广告位招租中
</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
<!--第二列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#000000;">文字广告位招租中</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
</tbody></table>
</div>
[/hidecontent]文章链接:https://www.babc.cc/web/465.html
文章标题:zibll子比主题首页广告布局-首页广告图片文字代码
文章版权:辉哥博客 (haah.net) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于
文章标题:zibll子比主题首页广告布局-首页广告图片文字代码
文章版权:辉哥博客 (haah.net) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于
2025年09月07日 23时34分42秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系辉哥:m@haah.net
