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

先来一个效果

20210620140601

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

b2主题美化之添加视差背景图

2021-5-26 18:46:44

WordPress教程

B2主题安装教程(新手必看图文教程)

2021-6-26 20:16:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索