⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
低调朴实的双按钮引导卡片

秋叶资源网 by Qiuye

B2美化教程纸工场所用的 动态4格广告

B2美化教程纸工场所用的 动态4格广告

B2美化教程纸工场所用的 动态4格广告-秋叶资源网

这里是纸工场 所用的 动态4格广告 具体请看看:https://paper.tv/

B2美化教程纸工场所用的 动态4格广告-秋叶资源网

 

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

 

B2美化教程纸工场所用的 动态4格广告-秋叶资源网
B2美化

wordpress美化 - 实用的首页四格模块

2020-3-19 14:01:13

B2美化

B2主题安装方法 新版7b2主题 收藏备用

2020-3-23 21:29:33

⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 纸工厂的那个标签美化我就用不了

  2. 学习学习总之没错

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
WordPress美化 - Npcink