分享一个首页会员评价模块

效果图

代码加入子主题style.css

/*设计评价开始*/
.feng_vip_pingz{max-width: 1200px;/* padding:10px 10px 0px 0; *//* display:inline-block; *//* position:relative; */margin: 0 auto;/* top:0; */border-radius:6px;/* text-align:center; *//* display:flex; *//* margin-right:400px; */}
.feng_vip_pingz li{/* float:left; */width: 24%;padding:30px 15px;padding-bottom:20px;margin-right: 12px;background:#fff;border:1px solid #f0f0f0;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,.02);text-align: center;}
.deanmbavarz{width:80px;height:80px;margin:0 auto;position:relative;}
.deanmbavarz img{border-radius:50%;}
.deanmbavarz span{display:block;width:80px;height:30px;background:url(/pic/vipbiaozhi.png) 0 0 no-repeat;background-size:80px ;position:absolute;bottom:-10px;right:0px;}
.deanmbusenamez{height:30px;line-height:30px;margin-top:10px;font-size:16px;color:#666;}
.deanmbusenamez b{font-size:14px;color:#dcae69;padding-left:10px;}
.feng_vip_pingz ul li p{font-size:14px;line-height:26px;padding:0 20px;margin-top:5px;color:#666;display:block;text-align:left;}
.feng_vip_pingz ul li p b{color:#ccc;font-size:23px;}
ul.vipxyiz{list-style:none;width: 100%;margin:0;/* padding-left:revert; */padding-top:20px;display: flex;flex-wrap: wrap;}
@media screen and (max-width:800px){
.feng_vip_pingz li{width:100%!important;padding:0!important;padding-bottom:20px!important;padding-top:20px!important;margin:10px 0!important;}
}
/*设计评价结束*/

首页添加模块

<div class="feng_vip_pingz">
	<div class="deanw1180z">
		<div class="clear"></div>
		<ul class="vipxyiz">
				<li>
					<div class="deanmbavarz"> <img src="/wp-content/themes/b2/Assets/fontend/images/default-avatar.png" width="80"
							alt="用户头像"> <span></span> </div>
					<div class="clear"></div>
					<div class="deanmbusenamez">奶酱超阔爱<b>终身会员</b></div>
					<div class="clear"></div>
					<p><b>"</b>作为一名爱设计的职场小白,在入职初期对素材需求大,同事给我推荐了鹿主题,打开链接后确实让我惊喜,素材精美且全面,每天都会更新素材,呈现效果非常高大上,拓宽了我的创作思维,对我的提升帮助非常大,感谢鹿主题。<b>"</b>
					</p>
				</li>
				<li>
					<div class="deanmbavarz"> <img src="/wp-content/themes/b2/Assets/fontend/images/default-avatar.png" width="80"
							alt="用户头像"> <span></span> </div>
					<div class="clear"></div>
					<div class="deanmbusenamez">呆橘<b>终身会员</b></div>
					<div class="clear"></div>
					<p><b>"</b>设计师使用的软件是个很大的问题,安装不纯净的软件,很容易做着做着就软件崩溃,很让人苦恼,鹿主题的出现给我带来了一个新的选择,提供海量免费的绿色纯净软件,主要是全部免费,作为一个白嫖党,这个很吸引我!<b>"</b>
					</p>
				</li>
				<li>
					<div class="deanmbavarz"> <img src="/wp-content/themes/b2/Assets/fontend/images/default-avatar.png" width="80"
							alt="用户头像"> <span></span> </div>
					<div class="clear"></div>
					<div class="deanmbusenamez">沈息瓷<b>终身会员</b></div>
					<div class="clear"></div>
					<p><b>"</b>作为设计师,能拥有一个高质量且插件丰富的网站是做设计的资本,鹿主题设立了资源代找窗口,主要还是免费的,好多插件脚本都可以帮忙免费代找,真的太贴心了,有个功能非常强大的插件后,极大提高了我的工作效率。<b>"</b>
					</p>
				</li>
				<li>
					<div class="deanmbavarz"> <img src="/wp-content/themes/b2/Assets/fontend/images/default-avatar.png" width="80"
							alt="用户头像"> <span></span> </div>
					<div class="clear"></div>
					<div class="deanmbusenamez">秋离未离<b>终身会员</b></div>
					<div class="clear"></div>
					<p><b>"</b>我不是设计师,是一名正在读大三的大学生,在鹿主题上能获取到平时学习上要用的一些小神器和办公软件下载,但是让我最喜欢的还是鹿主题的百宝箱功能,特别第一个太爱了,帮我省了不少小钱钱!<b>"</b>
					</p>
				</li>
		</ul>
	</div>
</div>

用到的一张图片上传至根目录pic文件夹下

https://lmtd.cn/wp-content/uploads/2022/05/1652794530-vipbiaozhi.rar

给TA打赏
共{{data.count}}人
人已打赏
b2美化

评论框添加图片背景特效

2022-3-24 20:32:15

b2美化

右侧新快捷导航美化

2022-5-18 5:34:30

重要声明

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


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

2 条回复 A文章作者 M管理员
  1. 剑去了无痕

    支持

  2. 拾亚网

    支持