文章
文章用户商铺文档快讯圈子网址导航

WordPress网站B2主题会员展示模块

WordPress网站B2主题会员展示模块

1.演示效果

WordPress网站B2主题会员展示模块

2.实现教程

（1）html代码

注意css、js等文件的地址

<link rel="stylesheet" href="https://www.ahap.cn/rz-image/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.ahap.cn/wp-content/themes/b2/Assets/fontend/style.css" type="text/css" media="all">
<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://img.onecad.cn/wp-content/uploads/2022/01/20220119153722476.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153722476.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
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="https://www.onecad.cn/users/1" 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://img.onecad.cn/wp-content/uploads/2022/01/20220119153748481.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153748481.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
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="https://www.onecad.cn/users/2" 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://img.onecad.cn/wp-content/uploads/2022/01/20220119153914348.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153914348.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
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="https://www.onecad.cn/users/21" 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://img.onecad.cn/wp-content/uploads/2022/01/20220108072334884.jpg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220108072334884.jpg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
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="https://www.onecad.cn/users/35" 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://img.onecad.cn/wp-content/uploads/2022/01/20220119153829187.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153829187.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
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="https://www.onecad.cn/users/45" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
</div>
</div>
</div>

（2）CSS代码

.demo {
padding-bottom: 2em;
}
.our-team {
padding: 20px 0 0px;
background: #ffffff;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}
.demo .user-s-info-name {
margin-top: 0px;
display: flex;
flex-flow: column;
margin-left: 0px;
}
.demo .user-s-info-desc {
font-size: 13px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 100%;
background: #ffffff;
padding: 10px;
color: #bcbcbc;
height: 62px;
line-height: 35px;
text-align: center;
box-sizing: border-box;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
}
.our-team .pic {
display: inline-block;
width: 130px;
height: 130px;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
.our-team .pic:before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background: #ff3a55;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 1;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before {
height: 100%;
}
.our-team .pic:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff3a55;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 24px;
}
.col-sm-6 {
cursor: pointer;
width: calc(20% - 12px);
border-radius: 4px;
background-size: 100% 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
@media screen and (max-width: 768px){
.col-sm-6 {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 500px){
.col-sm-6 {
width:100%;
}
}
.our-team .pic img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .pic img {
box-shadow: 0 0 0 8px #f7f5ec;
transform: scale(0.8);
}
.our-team .team-content {
margin-bottom: 30px;
}
.our-team .title {
font-size: 22px;
font-weight: 700;
color: #4e5052;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 5px;
}
.our-team .post {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background: #ff3a55;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: #fff;
transition: all 0.3s ease 0s;
}
.our-team .social li a:hover {
color: #eb1768;
background: #f7f5ec;
}
.user-s-follow a{
border-radius: 4px;
color: #fff;
padding: 5px 10px;
transition: opacity .2s;
position: relative;
cursor: pointer;
font-size: 12px;
margin: 0;
white-space: nowrap;
background: #ff3355;
border: 1px solid #ff3355;
border-radius: 5px;
}
@media only screen and (max-width: 990px) {
.our-team {
margin-bottom: 30px;
}
}
/*首页模块标题*/
#biaoti.post-modules-top {
display: flex;
line-height: 1;
align-items: center;
justify-content: space-between;
margin-bottom: 0px;
}
.modules-title-box .module-title {
font-size: 22px;
text-align: left;
margin-right: 10px;
font-weight: 500;
}
.wwwmodel-title {
padding: 30px 0px 30px;
}
.clearfix {
zoom: 1;
}
.wwwmodel-title .wwwmodel-title-left {
float: left;
}
.wwwmodel-title .wwwmodel-title-left h3 {
color: #333333;
font-size: 22px;
}
.wwwmodel-title .wwwmodel-title-right {
float: right;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-active {
color: #666;
font-weight: bold;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item {
display: inline-block;
font-size: 14px;
color: #999;
cursor: pointer;
margin-left: 44px;
padding-bottom: 8px;
transition: all ease 0.4s;
position: relative;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-more {
display: inline-block;
padding: 0px 2px;
font-size: 14px;
color: #999;
top: 3px;
cursor: pointer;
padding-bottom: 8px;
margin-left: 40px;
position: relative;
transition: all ease 0.4s;
}
.clearfix:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:hover {
color: #666;
font-weight: bold;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:after {
content: '';
width: 0px;
height: 1px;
background-color: #3BC66F;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
transition: all ease 0.4s;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:hover:after {
width: 100%;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-active:after {
width: 100%;
}
/*首页模块仿照OM*/
.model-column {
margin: 0 auto;
}
.model-column .common-model-wrap .model-item:nth-of-type(6n) {
margin-right: 0
}
.model-column .model-item {
max-height: 331px;
width: 294px;
margin: 0 16px 16px 0;
transition: all .2s linear;
border-radius: 5px
}
.model-column .model-item:hover {
box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
transform: translateY(-5px)
}
.model-column .model-item:hover .model-info>p {
color: #e80000
}
.model-column .model-item:hover .model-info>div {
color: #e80000
}
.model-column .model-item .model-cover {
display: block;
width: 100%;
height: 285px;
background-color: #fff
}
.model-column .model-item .model-cover img {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s linear;
border-radius: 5px 5px 0 0
}
.model-column .model-item .model-info {
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 0 14px;
background-color: #fff;
border-radius: 0 0 5px 5px
}
.model-column .model-item .model-info .title {
color: #666;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.model-column .model-item .model-info>p {
flex: 2;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.model-column .irregular-wrap {
display: flex
}
.model-column .irregular-wrap .irregular-left {
flex-shrink: 0;
max-height: none
}
.model-column .irregular-wrap .irregular-left .model-cover {
height: 634px
}
.model-column .irregular-wrap .irregular-center {
max-width: 909px;
display: flex;
flex-wrap: wrap
}
.model-column .irregular-wrap .irregular-right .model-item {
width: 590px;
margin-right: 0
}
@media screen and (max-width: 1366px) {
.model-column .irregular-wrap .irregular-right .model-item {
width: 496px;
margin-right: 0
}
.model-column .model-item {
max-height: 331px;
width: 232px;
margin: 0 16px 16px 0;
transition: all .2s linear;
border-radius: 5px;
}
.model-column .model-item .model-cover {
display: block;
width: 100%;
height: 232px;
background-color: #fff;
}
.model-column .irregular-wrap .irregular-left .model-cover {
height: 528px;
}
}
/*首页问答列表*/
.encyclopedias {
margin-top:10px;
}
.encyclopedias ul {
width:100%;
padding:20px;
box-sizing:border-box;
background:#fff;
margin-bottom:30px; 
margin-top:0px; 
}
.encyclopedias ul .px_item {
width:50%;
float:left;
}
.encyclopedias ul .px_item:nth-child(2n+1) {
padding-right:10px;
border-right:1px dotted #f0f0f0
}
.encyclopedias ul .px_item:nth-child(2n) {
padding-left:10px
}
.encyclopedias ul .px_item a {
display:block;
width:100%;
line-height:50px;
box-sizing:border-box;
font-size:15px;
position:relative;
background:#fff url(./img/zizhu/icon-q.png.webp) 10px center no-repeat;
border-radius:4px;
padding-right:120px;
padding-left:36px;
}
.encyclopedias ul .px_item a:hover {
background:#f9f9f9 url(./img/zizhu/icon-q.png.webp) 10px center no-repeat;
border-radius:4px;
}
.encyclopedias ul .px_item a .question {
position:absolute;
height:50px;
position:absolute;
right:10px;
top:0;
z-index:2;
/*background:url(./img/zizhu/icon-q.png.webp) left center no-repeat;*/
width:auto;
padding-left:24px;
line-height:50px
}
.encyclopedias ul .px_item a:hover .question {
/*background:url(./img/zizhu/icon-q.png.webp) left center no-repeat;*/
width:auto
}
@media screen and (max-width: 768px){
.encyclopedias ul .px_item {
width:100%;
float:left;
}
.encyclopedias ul .px_item a {
display: block;
width: 100%;
line-height: 30px;
padding: 10px 0;
box-sizing: border-box;
font-size: 15px;
position: relative;
background: #fff url(./img/zizhu/icon-q.png.webp) 0px 18px no-repeat;
border-radius: 4px;
padding-right: 0px; 
padding-left: 25px;
}
.encyclopedias ul .px_item a .question {
display: none;
}
.encyclopedias ul .px_item:nth-child(2n) {
padding-left:0px
}
.encyclopedias ul .px_item:nth-child(2n+1) {
padding-right:10px;
border-right:1px dotted #fff;
}
}
.comment-text p strong{
font-weight: 700;
padding: 0 5px;
color: var(--hover_color);
}
.part-title {
display: flex;
align-items: center;
margin-bottom: -10px;
}
.puxin_sx{
font-size: 14px;
letter-spacing: .8px;
position: relative;
}
.part-title h3 {
flex: 1;
margin-bottom: 10px;
font-size: 25px;
font-weight: normal;
white-space: nowrap;
margin-right: 10px;
padding-top: 1px;
}
.part-title p {
letter-spacing: .5px;
}
.puxin_gd{
white-space: nowrap;
margin-left: 10px;
padding-bottom: 20px;
}
.puxin_gd .btn {
position: relative;
padding: 0 16px;
display: block;
border-radius: 0px;
color: #8590A6;
background-color: #fff;
height: 32px;
font-size: 14px;
color: #fff;
line-height: 32px;
background-image: -webkit-linear-gradient(0deg,#ff416c 0%,#ff4b2b 100%);
display: flex;
align-items: center;
}
.part-title .part-nav{
overflow-x: auto;
white-space: nowrap;
padding-bottom: 20px;
}
.part-title .part-nav .all {
background: var(--hover_color);
color: #fff;
}
.part-title i {
padding-left: 10px;
}
.part-title .part-nav a {
color: #606266;
font-size: 13px;
padding: 4px 10px;
display: inline-block;
margin-left: 20px;
transition: all .3s
}
.title_puxin >div:nth-of-type(2) {
margin-top: 10px;
color: #999;
font-size: 16px;
margin-bottom: 20px;
}
/* VIP头像CSS */
.lv-icon.b2-vip0 b {
color: #000 !important;
background: linear-gradient(90.34deg, #D7E5FF 0.27%, #B9CBFF 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip1 b {
color: #6C4A20 !important;
background: linear-gradient(90.34deg, #FFD2A2 0.27%, #FFE2C2 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip2 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip3 b {
color: #ffffff !important;
background: linear-gradient(90.34deg, #e54b63 0.27%, #e54b63 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.user-w-lv {
display: flex;
height: 22px;
flex-wrap: wrap;
}
.b2-vip0{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip1{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip2{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip3{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
/* 图酷网会员列表 */
@media (min-width:768px) {
.home-section-designs {
display: block;
width: 100%;
}
}
.home-section-designs .items {
overflow: hidden;
margin: 0 -8px 0px
}
.home-section-designs .items .item-wrap {
float: left;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px
}
@media (min-width:1024px) {
.home-section-designs .items .item-wrap {
width: 25%
}
}
.home-section-designs .items .item {
background: #fff;
overflow: hidden;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s
}
.home-section-designs .items .item:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}
.home-section-designs .items .item-thumb .thumb {
padding-top: 100%
}
.home-section-designs .items .item-thumb .thumb:hover {
opacity: .8
}
.home-section-designs .items .item-main {
padding: 15px 0 0
}
@media (min-width:768px) {
.home-section-designs .items .item-main {
padding: 16px 25px
}
}
.home-section-designs .items .item-main h2 {
font-size: 18px;
color: #3c3c3c;
font-weight: 400;
line-height: 20px;
height: 20px;
overflow: hidden;
margin-bottom: 15px
}
.home-section-designs .items .item-main h2 span {
margin-left: 5px;
font-size: 13px;
color: #b2b2b2
}
.home-section-designs .items .item-main h2:hover {
color: #3385ff
}
.home-section-designs .items .item-main h4 {
margin: 0 -5px;
font-weight: 400;
line-height: 22px;
height: 22px;
overflow: hidden
}
.one_list_a{
font-size: 13px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 100%;
background: #ffffff;
color: #bcbcbc;
}
.home-section-designs .items .item-main h4 span {
display: inline-block;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #e5f0ff;
font-size: 12px;
color: #3385ff;
padding: 0 5px;
margin: 0 5px;
white-space: nowrap
}
.home-section-designs .items .item-main h4 span:hover {
background: #3385ff;
color: #fff
}
/*自定义footer底部CSS*/
.fl{float:left;width: 40%;justify-content: space-between;display: flex;}
.fla{float:left;}
.fr{float:right;}
.public-foot{width:100%;background:#2d3237;display:table;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.public-foot .foot-cont{padding:30px
0;display:table}
@media screen and (max-width: 768px){
.public-foot{
display: none;
}
}
@media screen and (min-width: 768px){
.footer-bottom{
display: none;
}
}
.public-foot .foot-cont
h4{color:#fff;margin-bottom:20px}
.public-foot .foot-cont-fl ul>li
a{color:#b2b2b2;font-size:13px}
.public-foot .foot-cont-fl ul>li a:hover{color:#ff3a55}
.public-foot .foot-cont-fr
.tel{margin-right:55px;float: left; padding-top: 6px;}
.public-foot .tel-number{display:table}
.public-foot .tel-icon
.tel-icon-a{width:42px;height:42px;line-height:42px;background:#1e1f23;color:#8b8b8b;text-align:center;margin-right:8px;padding: 10px;}
.public-foot .tel-icon .tel-icon-a:hover{background:#ff3a55;color:#fff;}
.org{color:#ff3a55}
.public-foot .tel-number{font-size:24px;margin-top:20px}
.public-foot
.ewm{margin-top: 5px;}
.public-foot .ewm
span{display:block;text-align:center;color:#b2b2b2;padding-top: 5px;}
.public-foot .ewm ul
li{float:left;margin-left:30px;text-transform:uppercase}
.public-foot .ewm ul li
img{width:100px}
.foot-copyright{width:100%;color:#666;padding:20px
0 10px;display:table;border-top: 1px solid #23232a;}
.foot-copyright
p{font-size:12px;line-height: 30px;}
.foot-copyright p
a{color:#666}
.foot-copyright p a:hover{color:#ff3a55}
.foot-copyright-fr ul
li{float:left;margin-right:5px}
.foot-copyright-fr ul li
a{display:block}
.fl ul li{
font-size: 13px;
padding: 10px 0px;
box-sizing: border-box;
}
.fl .html-widget {
padding: 10px 0px 0px 0px;
}
.fl h2{
font-size: 16px;
padding: 5px 0px;
color: #fff;
line-height: 1;

}
.tel > h2 {
font-size: 16px;
padding-bottom: 22px;
color: #fff;
line-height: 1;
font-weight: 500;
}
/*自定义home_srarch模块CSS*/
.flickity-enabled.is-draggable {
margin-top: -25px;
}

给TA打赏
共{{data.count}}人
人已打赏
B2美化教程技术教程

WordPress网站B2主题美化之文章彩色角标

2025-1-15 16:31:16

B2美化教程技术教程

WordPress网站b2主题美化之文章顶部“新春/活动倒计时模块”

2025-1-15 16:38:59

40 条回复 A文章作者 M管理员
  1. 全是爱%

    这个主题不错啊 喜欢这种设计风格

  2. 尽鹤

    很棒的分享666

  3. gfdsd

    实用教程 感谢分享 赞赞赞

  4. Midnight

    赞不错的模块设计呢 试试这个功能 期待效果哈哈 666

  5. CC化腐朽为神奇

    太棒了，这个模块设计真不错！666

  6. 晚风撩人

    太棒了，学习到了新姿势！

  7. 小熊炸毛了🐻

    太棒了，学习到新知识了666

  8. 半生.

    很不错的分享，感谢提供教程 继续加油

  10. 浊酒

    很不错的模块设计 喜欢这个样式

  11. 南卉

    这个功能真不错啊，值得试试666

  12. single

    内容很详细，学习了很多知识666

  14. 困成憨包😴

    给力的教程，学习啦

  15. 南瘾浪

    好棒的设计教程，学习到了很多知识 继续加油

  16. 括叶作舟

    很有启发，学习到了不少知识

  17. 暮倦

    学习到了很多，感谢分享！

  18. 香薰恋乆

    这个会员展示模块真不错呀，设计很赞！

  19. happy～

    很不错的分享666

  20. Tears°

    很实用，感谢分享！

  21. 繁华若梦

    内容太赞了，学习到了很多知识 试试这个模块 666

  22. 微信用户

    主题真不错，学习了很多，感谢分享

  23. ∫半字浅眉︼

    很实用的模块 赞一个

  24. 橘子海🍊

    好详细的教程，感谢分享！

  25. 欠迩的太多

    很不错的教程！超实用！

  26. 心岛初晴°

    不错的主题设计，很详细的教程 给力

  27. 美丽玉兔

    这效果太棒了！666

  28. Warmheart暖心

    不错的教程，很实用呢 试试

  29. 闭眼⼊你梦

    好棒的展示模块 感谢分享！

  30. q.w.q

    不错的教程哦666

  31. 修身静心!

    这模组真不错 赞一个

  33. 沉香如屑

    很棒的分享！期待更多教程加油

  34. 子衿

    很棒的内容，学习到了新知识！

  35. 桃扇骨

    这个模块真不错，学习了呢666

  36. 休止

    太棒了，学习到新知识了666

  37. 别说违心话.

    很有帮助，学习了很多

  38. 与之二三事

    很实用的模块啊点赞

  39. 〖夜神鈅〗

    讲的真不错，点赞支持一下666

  40. 萌面人

    这模块真不错啊 赞赞赞

❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部
新
年
乐
快