B2主题首页添加热门用户展示

前言：

这次分享的是html代码+css，适合直接b2主题自定义使用

美化图：

第一步：

在B2主题模块管理-首页-添加自定义模块中添加以下代码，（代码不提供图片，请自行更换里面的图片链接）

<div id="Onecad_hotuser" class="home_row module-posts jktheme_onh">
<div id="user-list">
<div class="wrapper">
<div class="post-modules-top ">
<div class="modules-title-box">
<div class="Onecad_title post-list">
<h2 class="module-title">
活跃用户
</h2>
<div>
</div>
</div>
</div>
<div class="post-list-cats post-list-cats-has-title">
<div class="post-carts-list-row">
<a href="/?s=&amp;type=user" class="cat-list post-load-button post-load-button-more">
<span data-type="cat">
全部
<i class="b2font b2-arrow-right-s-line ">
</i>
</span>
</a>
</div>
</div>
</div>
<div class="hotuser-container">
<div class="demo">
<div id="h_designer" class="home-section-designs">
<div class="items">
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接1"
alt="花醉" src="用户头像链接1"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">
花醉
<i class="sjcnh b2-renzheng3">
</i>
</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>
<span class="lv-icon user-vip b2-vip3">
<img src="用户会员等级图片1"
title="设计会员" class="jkvip-icon">
</span>
</b>
<span class="lv-icon user-lv b2-lv7">
<i title="lv7">
lv7
</i>
<b title="lv7">
🌞⭐⭐⭐
</b>
</span>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>
文章
</span>
<p>
219
</p>
</div>
<div>
<span>
评论
</span>
<p>
35
</p>
</div>
<div>
<span>
粉丝
</span>
<p>
8
</p>
</div>
<div>
<span>
关注
</span>
<p>
1
</p>
</div>
</div>
<div class="user-s-info-desc">
设计站长
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<a href="用户主页链接1" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接2"
alt="官方审核员" src="用户头像链接2"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">
官方审核员
<i class="sjcnh b2-renzheng3">
</i>
</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>
<span class="lv-icon user-vip b2-vip3">
<img src="用户会员等级图片2"
title="设计会员" class="jkvip-icon">
</span>
</b>
<span class="lv-icon user-lv b2-lv6">
<i title="lv6">
lv6
</i>
<b title="lv6">
🌞⭐⭐
</b>
</span>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>
文章
</span>
<p>
7
</p>
</div>
<div>
<span>
评论
</span>
<p>
0
</p>
</div>
<div>
<span>
粉丝
</span>
<p>
2
</p>
</div>
<div>
<span>
关注
</span>
<p>
1
</p>
</div>
</div>
<div class="user-s-info-desc">
官方审核员
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<a href="用户主页链接2" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接3"
alt="余生不再浪了" src="用户头像链接3"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</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">
<i title="lv0">
lv0
</i>
<b title="lv0">
✨
</b>
</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>
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="用户主页链接3" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接4"
alt="花醉科技" src="用户头像链接4"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</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-vip0">
<img src="用户会员等级链接4"
title="体验会员" class="jkvip-icon">
</span>
</b>
<span class="lv-icon user-lv b2-lv0">
<i title="lv0">
lv0
</i>
<b title="lv0">
✨
</b>
</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>
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="用户主页链接4" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接5"
alt="Floweri" src="用户头像链接5"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">
Floweri
</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>
</b>
<span class="lv-icon user-lv b2-lv0">
<i title="lv0">
lv0
</i>
<b title="lv0">
✨
</b>
</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>
0
</p>
</div>
<div>
<span>
关注
</span>
<p>
1
</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<a href="用户主页链接5" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
<div class="item-wrap">
<div class="our-team b2-radius">
<div class="pic">
<img data-src="用户头像链接6"
alt="king" src="用户头像链接6"
class="avataruser b2-radius lazy entered loaded" data-ll-status="loaded">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">
king
</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>
<span class="lv-icon user-vip b2-vip2">
<img src="用户会员等级图片链接6"
title="黄金会员" class="jkvip-icon">
</span>
</b>
<span class="lv-icon user-lv b2-lv1">
<i title="lv1">
lv1
</i>
<b title="lv1">
⭐
</b>
</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>
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="用户主页链接6" class="link-block">
个人主页
</a>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

第二步：

在自定义CSS中添加以下代码