B2主题首页四格模块美化版

14小时前发布

100

主题开始教程

我们已经在后台设置添加了一个广告模块，接下来将下面的代码替换原来广告模块里面的默认代码。

<div class="section">
<div class="home-first">
<div class="container hide_sm">
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-software">
<h3 class="hf-widget-title">
<i class="fa fa-cloud"></i>
<a href="#" target="_blank">云产品</a>
<span>云服务器等云产品推荐</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<a href="#" rel="external nofollow" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/01.png)"></i>
<span>阿里云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/02.png)"></i>
<span>腾讯云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/03.png)"></i>
<span>企业云</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="thumb " style="background-image:url(https://www.cmboke.cn/imgs/b2/04.png)"></i>
<span>香港云</span></a>
</li>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-2">
<h3 class="hf-widget-title">
<i class="fa fa-tint"></i>
<a href="#" target="_blank">看热门</a>
<span>主题模板库精品推荐</span></h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="#" target="_blank">
<span>RiPro美化</span></a>
<a class="" href="#" target="_blank">
<span>wordpress教程</span></a>
<a class="" href="#" target="_blank">
<span>源码</span></a>
<a class="" href="#" target="_blank">
<span>样机</span></a>
<a class="" href="#" target="_blank">
<span>配色神器</span></a>
<a class="" href="#" target="_blank">
<span>本站服务</span></a>
<a class="" href="#" target="_blank">
<span>服务器特惠</span></a>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-1 hf-widget-hot-cats">
<h3 class="hf-widget-title">
<i class="fa fa-dropbox"></i>
<a href="#" target="_blank">热门专区</a>
<span>推荐设计热点</span></h3>
<div class="hf-widget-content">
<div class="icon-b">
<ul>
<li>
<a href="#" target="_blank">
<i class="fa fa-bookmark"></i>
<span>设计软件</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-paint-brush"></i>
<span>素材专题</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-graduation-cap"></i>
<span>设计教程</span></a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-pencil-square-o"></i>
<span>设计自检</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-4">
<h3 class="hf-widget-title">
<i class="fa fa-book"></i>
<a href="#" target="_blank">最新活动</a>
<span>免费会员享福利</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<h3>
<a href="#" target="_blank">
<i class="icon-time"></i>
<span>RiPro美化服务火热售卖中</span>
<em>网站美化</em></a>
</h3>
</li>
<li>
<h3>
<a href="#" target="_blank">
<i class="icon-time"></i>
<span>关于本站积分付费阅读获取内容说明</span>
<em>积分说明</em></a>
</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

然后就是把四格模块对应的CSS代码加在上述代码的后面即可，CSS代码在下方会给出，继续介绍其他主题如何使用首页四个模块美化版。

引入图片中的文字图标

<script src="https://use.fontawesome.com/865314f53c.js"></script>

b2主题直接将该代码加在常规设置—综合设置里面的头部HTML标签框内即可。其他主题就加在自定义代码里面就可以了，也可以直接去代码处修改。

评分

欢迎为Ta评分