7B2主题美化之四格广告位

实现教程

设置广告位

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

<link href="../ad.css" rel="stylesheet"> //下面的CSS文件路径，需要更改
<div class="ad-Wrap mobile-hidden">
<ul class="privilegesList"> 
<li class="privilegesList-items">
<a href="https://www.dzcrv.com/"><img src="../pic/ad/12.png.webp" alt="广告招租" class="ptabPics"> 
<div class="tabIcons">
<div class="tabIconsWrap"><img src="../pic/ad/11.png.webp" class="tabIcons-Img"></div>
<span class="tabIcons-text">获取更多优质客户</span>
</div>
</a>
</li>
<li class="privilegesList-items">
<a href="https://www.dzcrv.com/"><img src="../pic/ad/22.png.webp" alt="纸模型制作教程" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/21.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">从浅到深的技巧视频</span>
</div>
</a>
</li> 
<li class="privilegesList-items">
<a href="https://www.dzcrv.com/"><img src="../pic/ad/32.png.webp" alt="直印服务" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/31.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">图纸数码高清直印</span>
</div>
</a>
</li>
<li class="privilegesList-items">
<a href="https://www.dzcrv.com/"><img src="../pic/ad/42.png.webp" alt="欢迎投稿" class="ptabPics"> 
<div class="tabIcons ">
<div class="tabIconsWrap"><img src="../pic/ad/41.png.webp" class="tabIcons-Img"></div> 
<span class="tabIcons-text">联系QQ: 84368896</span>
</div>
</a>
</li>
</ul>
</div>

广告位美化

CSS样式文件，注意此时的文件路径，和上面对应