### [B2主题 首页 动态4格 广告代码](https://ai.guaqi.com/article/51683)

**Published:** 2021-06-20T05:43:10

**Author:** 纸工场

**Excerpt:** 先来一个效果 演示网站：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,

先来一个效果

![B2主题 首页 动态4格 广告代码](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

演示网站：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文件 + 代码文件

**Categories:** B2主题教程

**Comments:** 

**老林:** ![](https://static.7b2.com/wp-content/uploads/2021/06/comment-drawing_51683_comment_drawing_LlVQo25323.png)

**纸工场:** 下载文件给删了， 有需要在群共享下载吧

**远走高飞11689:** 

**campoem:** ![](https://static.7b2.com/wp-content/uploads/2021/08/4956316880ed39067_51683_comment_drawing.png)

**胡兴:** ?

**汝阳:** ![](https://static.7b2.com/wp-content/uploads/2021/07/823945f99f064f49c_51683_comment_drawing.png)

**seorapheal:** ![](https://static.7b2.com/wp-content/uploads/2021/07/87359b904a6ec68ce_51683_comment_drawing.png)

**李贰捌:** ![](https://static.7b2.com/wp-content/uploads/2021/07/776546c8225eb6b0_51683_comment_drawing.png)

**千面妖:** ![](https://static.7b2.com/wp-content/uploads/2021/07/196361d0e8d547b1f_51683_comment_drawing.png)

**win10928:** ?



---