WordPress网站B2主题美化之四格广告位

本教程由奇它论坛@老白转载自网络，原文标题：WordPress网站B2主题美化之四格广告位

一、效果演示

二、实现教程

2.1 设置广告位

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://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>

2.2 广告位美化

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

三、相关美化

文章很多，大家自行点击文末标签阅读吧！

WordPress网站美化之菜单栏小圆点教程

站长老白

• 22年2月4日
• 喜欢：1
• 浏览：1.1k

WordPress网站添加说说/站长动态页

站长老白

• 22年2月5日
• 喜欢：0
• 浏览：213