WordPress网站B2主题美化之四格广告位

本教程由老白博客@老白转载自网络，原文标题：WordPress网站B2主题美化之四格广告位

一、效果演示

二、实现教程

2.1 设置广告位

B2主题设置 > 模块管理 > 首页 > 新建一个”横条4格广告” > 调用内容 > 选 广告位 > 输入下面代码

<link href="../ad.css" rel="stylesheet"> //下面的CSS文件路径，需要更改
<div class="ad-Wrap mobile-hidden">
<ul class="privilegesList"> 
<li class="privilegesList-items">
<a href="https://paper.tv/paper-ad/"><img src="../pic/ad/12.png.webp" alt="广告招租" class="ptabPics"> 
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../pic/ad/11.png.webp" class="tabIcons-Img"></div>
<span class="tabIcons-text">获取更多优质客户</span>
</div>
</a>
</li>
<li class="privilegesList-items">
<a href="https://paper.tv/method_1/"><img src="../pic/ad/22.png.webp" alt="纸模型制作教程" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/21.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">从浅到深的技巧视频</span>
</div>
</a>
</li> 
<li class="privilegesList-items">
<a href="https://paper.tv/zhiyin/"><img src="../pic/ad/32.png.webp" alt="直印服务" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/31.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">图纸数码高清直印</span>
</div>
</a>
</li>
<li class="privilegesList-items">
<a href="https://paper.tv/enter/"><img src="../pic/ad/42.png.webp" alt="欢迎投稿" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/41.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">联系QQ: 5423777</span>
</div>
</a>
</li>
</ul>
</div>

2.2 广告位美化

CSS样式文件，注意此时的文件路径，和上面对应

转载自路人丁-原文地址-https://www.lurending.com/1243.html

.ads-box img{
width:138px;
border-radius:0;
}
.ads-tips{
display:none;
}

.ad-Wrap {
height:88px;
margin:0 auto;
margin-top:-20px;
background-color: transparent;
}
.privilegesList-items,.privilegesList-items a,.privilegesList.ptabPics {
display:block;
}
.tabIcons,.tabIcons-Img,.ptabPics {
position:absolute;
}
.privilegesList-items a,.tabIconsWrap {
position:relative;
}
.privilegesList {
clear:both;
height:auto;
font-size:0;
z-index:2;
}
.privilegesList a {
width:100%;
height:100%;
}
.privilegesList .privilegesList-items {
width:260px;
height:86px;
}
.privilegesList-items { /*框*/
float:left;
margin:20px 25px 0 0;
font-weight:700;
}
.privilegesList-items a {
text-align:center;
/* background:#eee; 框效果去底
border-radius:8px;
border:1px solid #b2bac2; */
box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
transition:all .15s linear 0s;
}
.privilegesList-items a:hover { /*底色渐变*/
/* border:1px solid transparent; */
background:#caa36d;
background:linear-gradient(90deg,#e1c08e,#b0834a);
}
.privilegesList-items a:hover .ptabPics { /*小图上移高度*/
transform:translateY(-10px);
}
.privilegesList-items a:hover .tabIcons-Img {
top:0;
}
.privilegesList-items a:hover .tabIcons-text { /*指向文字色*/
color:#3b3020;
}
.tabIcons { /*标题图*/
margin-left:20px;
margin-top:16px;
z-index:15;
}
.tabIconsWrap {
width:120px;
height:26px;
overflow:hidden;
}
.tabIcons-text {
color:#999;
font-size:15px;
display:block;
margin-top:6px;
text-decoration:none; /*没下划线*/
white-space:nowrap; /*不换行*/
transition:all .15s linear 0s;
}
.tabIcons-Img {
width:120px;
top:-26px;
}
/*小图+上浮*/
.ptabPics {
width:138px;
height:140px;
pointer-events:none;
top:-38px;
z-index:2;
right:-36px;
transition:transform .15s linear 0s;
}

三、相关美化

文章很多，大家自行点击文末标签阅读吧！