本教程代码由纸工场所用的动态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; }