B2PRO主题 – 首页添加会员开通展示模块

美化说明：
这篇文章介绍了在B2主题美化的首页中添加会员开通展示模块的使用教程。
文章指出,会员是网站的重要组成部分,可以增加网站的收入。
教程包括了在header.php文件中合适的位置添加代码,或者在B2主题设置模块管理中添加自定义模块,并在自定义CSS中添加相应样式。
最后需要强制刷新浏览器来查看效果,部分样式可以自行调整。
使用教程:
第一步
在你的首页模块header.php合适位置添加,或者b2主题设置模块管理,首页模块中添加自定义模块,加如下代码

<div id="jkindex_vip" class="j-modules-inner jktjvip">
<section class="litheme-section litheme-modules modules-pricing-table" id="modules-48">
<ul class="pricing-table pt-style-2 cols-3">

<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">体验会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">6.6</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(5次/天)下载网站资源</li>
<li>设计无推广返利</li>
<li>设计商店无折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips">立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:#00c18e;"> 花 醉 推 荐</div> 
<div class="pt-header">
<h3 class="pt-title">青铜会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">39</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(10次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips">立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">黄金会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">99</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得(20次/天)下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店95折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips">立即赞助</a>
<div class="b2tooltip" id="b2tooltip">一款带有复古气息的免贵可商用中文黑体</div>
</div>
</li>
<li class="pt-item pt-item-1 active">
<div class="vip_tj" style="background:;"></div> 
<div class="pt-header">
<h3 class="pt-title">设计会员</h3>
<span class="pt-desc"></span>
<div class="pt-price-wrap">
<span class="pt-sign">￥</span>
<span class="pt-price">299</span>
<span class="pt-unit">欢迎加入</span>
</div>
</div>
<div class="pt-content">
<p style="text-align: center;">特权服务</p>
<ul>
<li>设计尊贵会员标识</li>
<li>获得无限下载网站资源</li>
<li>设计推广返利使者</li>
<li>可享受设计商店8折扣</li>
</ul>
</div>
<div class="pt-box">
<a class="btn btn-lg pt-btn" href="/vips">立即赞助</a>
</div>
</li>
</ul>
</section>
</div>

第二步
在自定义css中添加以下样式
最后强制刷新浏览器以查看效果,部分样式自行调整