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文件 + 代码文件