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

本教程由奇它论坛@老白转载自网络,原文标题: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网站B2主题美化之四格广告位
WordPress网站B2主题美化之四格广告位

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

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

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

经验·技巧网站建设

WordPress网站复制内容版权弹窗提示

2022-2-5 10:17:07

经验·技巧网站建设

WordPress网站设置第三方外链跳转页面

2022-2-24 14:01:11

2 条回复 A文章作者 M管理员
  1. 体验服

    谢谢

  2. FQChen

    一句谢谢走天下

个人中心
购物车
今日签到
有新私信 私信列表
搜索