🎀 🌸

B2主题美化 首页添加会员开通展示模块 （二）

📝 heardic 🏷️ B2主题美化 🔖 个人主页 🔖 主页 🔖 评论
📅 2024-03-25 ⏱️ 9 分钟 🔢 2566 字
有问题请联系站长QQ2469329338
立即跳转

B2主题美化 首页添加会员开通展示模块 （二）

14610

这个模块依赖7b2主题的CSS文件！喜欢折腾的可以改成动态的，其他主题需要自行修改。

B2主题美化 首页添加会员开通展示模块 （二）插图

第一步

在适当的位置添加以下html代码：

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">胡哥</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip3"><i
                        style="border-color: rgb(30, 115, 190);"></i><b
                        style="color: rgb(30, 115, 190);">终身会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv7"><b>设计总监</b><i>lv7</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>214</p>
              </div>
              <div><span>评论</span>
                <p>1</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">HXP室内设计</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv1"><b>助理设计</b><i>lv1</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              室内设计，图纸深化设计
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">芭蕉</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>0</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">隔壁老王</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">kokoko</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">胡哥</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip3"><i
                        style="border-color: rgb(30, 115, 190);"></i><b
                        style="color: rgb(30, 115, 190);">终身会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv7"><b>设计总监</b><i>lv7</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>214</p>
              </div>
              <div><span>评论</span>
                <p>1</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">HXP室内设计</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv1"><b>助理设计</b><i>lv1</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              室内设计，图纸深化设计
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">芭蕉</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>0</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">隔壁老王</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">kokoko</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">胡哥</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip3"><i
                        style="border-color: rgb(30, 115, 190);"></i><b
                        style="color: rgb(30, 115, 190);">终身会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv7"><b>设计总监</b><i>lv7</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>214</p>
              </div>
              <div><span>评论</span>
                <p>1</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">HXP室内设计</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv1"><b>助理设计</b><i>lv1</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              室内设计，图纸深化设计
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=93803506&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">芭蕉</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
                        style="border-color: rgb(129, 215, 66);"></i><b
                        style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>2</p>
              </div>
              <div><span>粉丝</span>
                <p>0</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2428103839&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">隔壁老王</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>2</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="our-team b2-radius">
          <div class="pic"><img
              data-src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              
              src="https://q1.qlogo.cn/g?b=qq&nk=2469329338&s=5"
              class="lazy"></div>
          <div class="i-content">
            <div class="user-s-info-name">
              <h3 class="title">kokoko</h3>
              <p><span class="lv-icon user-lv b2-lv0"><b></b> <span
                    class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
            </div>
            <div class="user-s-data">
              <div><span>文章</span>
                <p>0</p>
              </div>
              <div><span>评论</span>
                <p>0</p>
              </div>
              <div><span>粉丝</span>
                <p>1</p>
              </div>
              <div><span>关注</span>
                <p>0</p>
              </div>
            </div>
            <div class="user-s-info-desc">
              这个人很懒，什么都没有留下！
            </div>
          </div>
          <ul class="social">
            <div class="user-s-follow"><a href="#" class="link-block">个人主页</a></div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

第二步

后台添加CSS代码

  此处内容已隐藏，请评论后刷新页面查看.
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
© 版权声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:2469329338@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。

THE END
B2主题美化Wordpress教程插件
# 评论# 主页# 个人主页
点赞10
heardic的头像-诺言资源网永久会员
评论 共1条
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容