WordPress 主题 B2美化 动态4格广告

本教程代码由纸工场所用的动态4格广告，效果显示：https://paper.tv/

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

<link href="../ad.css" rel="stylesheet">   //自己网站文件路径
<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" alt="广告招租" class="ptabPics"> 						
					<div  class="tabIcons">
						<div  class="tabIconsWrap"><img  src="../pic/ad/11.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="../pic/ad/22.png" alt="纸模型制作教程" class="ptabPics"> 
					<div  class="tabIcons ">
						<div  class="tabIconsWrap"><img  src="../pic/ad/21.png" 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" alt="直印服务" class="ptabPics"> 
					<div  class="tabIcons ">
						<div  class="tabIconsWrap"><img  src="../pic/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="../pic/ad/42.png" alt="欢迎投稿" class="ptabPics"> 
					<div  class="tabIcons ">
						<div  class="tabIconsWrap"><img  src="../pic/ad/41.png" class="tabIcons-Img"></div> 
						<span  class="tabIcons-text">联系QQ: 5423777</span>
					</div>
				</a>
			</li>
		</ul>
</div>

CSS样式文件

.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;
}