B2主题 首页 动态4格 广告代码

先来一个效果

演示网站：https://paper.tv/

在网站根目录建立一个文件夹，放入图片与 CSS（新建一个 ad.css，内容如下 ）

.ad-Wrap {
height: 90px;
margin:0 auto;
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;
z-index:2;
}
.privilegesList a {
width:100%;
height:100%;
}
.privilegesList .privilegesList-items {
width:245px;
height:70px;
}
.privilegesList-items { /*框*/
float:left;
margin:10px 10px 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;
border-radius: 5px;
}
.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:12px;
margin-top:10px;
z-index:3;
}
.tabIconsWrap {
width:120px;
height:27px;
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 {
max-width:150px;
pointer-events:none;
top:-46px;
z-index:2;
right:-36px;
transition:transform .15s linear 0s;
}

然后在WP后台 > B2主题设置 > 模块管理 > 首页 > 添加新模块 > 调用内容 自定义
这里注意要选 PC版， 即是“仅桌面可见”，手机版还没调整的！

填入下面内容：

<link href="https://paper.tv/ad/ad.css" rel="stylesheet">
<div class="ad-Wrap">
<ul class="privilegesList"> 
<li class="privilegesList-items">
<a href="https://paper.tv/paper-ad/"><img src="../ad/12.png" alt="高达图纸" class="ptabPics"> 
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../ad/61.png" 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="../ad/22.png" alt="动漫游戏纸模型" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../ad/21.png" class="tabIcons-Img"></div> 
<span class="tabIcons-text">从浅到深的技巧视频</span>
</div>
</a>
</li> 
<li class="privilegesList-items">
<a href="https://paper.tv/document/39766.html"><img src="../ad/32.png" alt="直印服务" class="ptabPics"> 
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../ad/31.png" class="tabIcons-Img"></div> 
<span class="tabIcons-text">图纸数码高清直印</span>
</div>
</a>
</li>
<li class="privilegesList-items">
<a href="https://paper.tv/enter/"><img src="../ad/42.png" alt="欢迎投稿" class="ptabPics"> 
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../ad/41.png" class="tabIcons-Img"></div> 
<span class="tabIcons-text">联系QQ: 5423777</span>
</div>
</a>
</li>
<li class="privilegesList-items" style="width: 150px; margin:10px 0 0 30px;">
<a href="https://paper.tv/mission/today">
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../ad/51.png" class="tabIcons-Img"></div> 
<span class="tabIcons-text">每日签到送积分</span>
</div>
</a>
</li>
</ul>
</div> 

其中的内容 按自己网站的需要 修改，
所用到的图片文件可以自己去我网站 Paper.tv 用F12下载！

下面是所有的图片与PSD文件 + 代码文件