首页广告图片文字代码，网站通用广告位代码
首页广告图片文字代码，网站通用广告位代码
概述简介
默认双端显示，可自行更改仅PC端显示或者仅移动端显示，子比适应，扒过来的，非常适合做广告位的站长，喜欢的话拿去用。
截图预览
部署代码
- 放到主题后台，自定义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://www.lhndy.cn
" 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://www.lhndy.cn" 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://www.lhndy.cn" 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://www.lhndy.cn" 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://www.lhndy.cn" 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://www.lhndy.cn" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#0000FF;">文字广告位招租中</span></a></td>
<td>
<a href="https://www.lhndy.cn" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://www.lhndy.cn" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://www.lhndy.cn" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span> </a> </td>
<td>
<a href="https://www.lhndy.cn" 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://www.lhndy.cn" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#970de1;">文字广告位招租中
</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" 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://www.lhndy.cn" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#000000;">文字广告位招租中</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://www.lhndy.cn" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
</tbody></table>
</div>
他们也感兴趣
(1)
-
安生
版块热门
暂无评论