🎉 恭喜你发现了宝藏！
立即去挖宝

子比主题美化 – 网站首页排行榜样式美化

235642
图片[1]-子比主题美化 – 网站首页排行榜样式美化-懒人Blog(资源素材网)

HTML代码如下

  此处内容已隐藏，请评论后刷新页面查看.

将上面的HTML代码放到自己的index.php里面 我目前是放到/wp-content/themes/zibll/index.php里面搜

<?php get_sidebar(); ?>
<?php get_sidebar(); ?>
<?php get_sidebar(); ?>

显示数据修改：

首先看下面代码，(‘cat=4&showposts=5&orderby=views’)第一个4是分类ID，第二个5是在首页出现几个

              <?php query_posts('cat=4&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
              <?php query_posts('cat=4&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>
              <?php query_posts('cat=4&showposts=5&orderby=views'); ?>
<?php while (have_posts()) : the_post(); ?>

将PHP代码放到index里面即可，然后我们接下来就是CSS样式啦

CSS代码—将CSS代码放到子比后台-自定义CSS样式即可！

/** 首页排行榜列表 **/
@media (max-width: 768px) {
    .ranking-item{
        width:100%!important;
    }
}
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}
.ranking-item {
    margin:0 auto;
  position: relative;
  width: calc(33.333% - 10px );
  /* height: 400px; */
  /* margin-right: 10px; */
  /* margin-left: 10px; */
  background: #fff;
  /* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
  /* border-radius: 8px; */
  box-shadow: 0 0 10px var(--main-shadow);
  border-radius: var(--main-radius);
  margin-bottom: 20px;
}
a.top-icon.js-rank-bottom1 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking1.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
a.top-icon.js-rank-bottom2 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking2.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
a.top-icon.js-rank-bottom3 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking3.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.class-box {
  margin-top: 60px;
}
a.class-item.js-rank {
  display: block;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.num-icon.num-icon1 {
  width: 40px;
  height: 22px;
  background: url(/pic/top1.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
}
img.class-pic {
  width: 90px;
  border-radius: 8px;
  margin-right: 5px;
}
.class-info {
  width: 190px;
  font-size: 12px;
}
.name {
  color: #545c63;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.price {
  color: #f01414;
  font-weight: 600;
  margin-bottom: 2px;
}
.study-num {
  color: #9199a1;
  font-weight: 400;
}
.num-icon.num-icon2 {
  background: url(/pic/top2.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}
.num-icon.num-icon3 {
  background: url(/pic/top3.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}
.num-icon.num-icon4 {
  background: url(/pic/top4.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}
.num-icon.num-icon5 {
  background: url(/pic/top5.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}
.num-icon.num-icon6 {
  background: url(/pic/top6.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 19px;
  height: 22px;
}
a.bottom-link.js-rank-bottom {
  width: 120px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 12px;
  color: #fff;
  line-height: 12px;
  font-weight: 500;
  background-image: linear-gradient(270deg,#ff4f39 0,#fd6400 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}
/** 首页排行榜列表结束 **/
/** 首页排行榜列表 **/
@media (max-width: 768px) {
    .ranking-item{
        width:100%!important;
    }
}
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}

.ranking-item {
    margin:0 auto;
  position: relative;
  width: calc(33.333% - 10px );
  /* height: 400px; */
  /* margin-right: 10px; */
  /* margin-left: 10px; */
  background: #fff;
  /* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
  /* border-radius: 8px; */
  box-shadow: 0 0 10px var(--main-shadow);
  border-radius: var(--main-radius);
  margin-bottom: 20px;
}

a.top-icon.js-rank-bottom1 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking1.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom2 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking2.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom3 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking3.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.class-box {
  margin-top: 60px;
}

a.class-item.js-rank {
  display: block;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.num-icon.num-icon1 {
  width: 40px;
  height: 22px;
  background: url(/pic/top1.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
}

img.class-pic {
  width: 90px;
  border-radius: 8px;
  margin-right: 5px;
}

.class-info {
  width: 190px;
  font-size: 12px;
}

.name {
  color: #545c63;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.price {
  color: #f01414;
  font-weight: 600;
  margin-bottom: 2px;
}

.study-num {
  color: #9199a1;
  font-weight: 400;
}

.num-icon.num-icon2 {
  background: url(/pic/top2.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon3 {
  background: url(/pic/top3.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon4 {
  background: url(/pic/top4.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon5 {
  background: url(/pic/top5.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon6 {
  background: url(/pic/top6.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 19px;
  height: 22px;
}



a.bottom-link.js-rank-bottom {
  width: 120px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 12px;
  color: #fff;
  line-height: 12px;
  font-weight: 500;
  background-image: linear-gradient(270deg,#ff4f39 0,#fd6400 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

/** 首页排行榜列表结束 **/
/** 首页排行榜列表 **/
@media (max-width: 768px) {
    .ranking-item{
        width:100%!important;
    }
}
.syphimg{
    width: 90px;
    height:60px;
    
    margin-right: 5px;
}
.syphimg img{
       border-radius: 8px;
    
}
.list.clearfix {
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
}

.ranking-item {
    margin:0 auto;
  position: relative;
  width: calc(33.333% - 10px );
  /* height: 400px; */
  /* margin-right: 10px; */
  /* margin-left: 10px; */
  background: #fff;
  /* box-shadow: 0 2px 6px 0 rgb(55 55 55 / 7%); */
  /* border-radius: 8px; */
  box-shadow: 0 0 10px var(--main-shadow);
  border-radius: var(--main-radius);
  margin-bottom: 20px;
}

a.top-icon.js-rank-bottom1 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking1.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom2 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking2.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

a.top-icon.js-rank-bottom3 {
  display: block;
  width: 129px;
  height: 43px;
  line-height: 32px;
  position: absolute;
  left: 150px;
  top: -7px;
  background: url(/pic/ranking3.png) no-repeat center/100%;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.class-box {
  margin-top: 60px;
}

a.class-item.js-rank {
  display: block;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.num-icon.num-icon1 {
  width: 40px;
  height: 22px;
  background: url(/pic/top1.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
}

img.class-pic {
  width: 90px;
  border-radius: 8px;
  margin-right: 5px;
}

.class-info {
  width: 190px;
  font-size: 12px;
}

.name {
  color: #545c63;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.price {
  color: #f01414;
  font-weight: 600;
  margin-bottom: 2px;
}

.study-num {
  color: #9199a1;
  font-weight: 400;
}

.num-icon.num-icon2 {
  background: url(/pic/top2.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon3 {
  background: url(/pic/top3.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon4 {
  background: url(/pic/top4.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon5 {
  background: url(/pic/top5.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 40px;
  height: 22px;
}

.num-icon.num-icon6 {
  background: url(/pic/top6.png) no-repeat center/100%;
  margin: 0 12px 0 15px;
  width: 19px;
  height: 22px;
}



a.bottom-link.js-rank-bottom {
  width: 120px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-size: 12px;
  color: #fff;
  line-height: 12px;
  font-weight: 500;
  background-image: linear-gradient(270deg,#ff4f39 0,#fd6400 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

/** 首页排行榜列表结束 **/

接下来就是下载图片，我将图标放在的下面，大家可以去下载！记住图片要对着CSS里面的目录对好，要不然看不到图片的！

购买子比主题
🎉 恭喜你发现了宝藏导航！>>点此前往<<

👋 感谢您的观看，对您有用就分享出去吧 ！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
子比主题美化 - 网站首页排行榜样式美化-懒人Blog(资源素材网)
子比主题美化 – 网站首页排行榜样式美化
此内容为付费资源，请付费后查看
100积分
安全资源
自动发货
永久使用
付费资源
© 版权声明
懒人资源网
"想做一件任何人都可以做的事情"
打赏作者
订阅
本文是原创文章，采用CC BY-NC-SA 4.0协议，完整转载请注明来自懒人资源网
THE END
子比主题美化代码插件
# 子比主题美化# 子比主题# 子比排行榜
展开阅读全文
文章不错？点个赞呗
点赞2赞赏 分享
You can't wait forever. Do something and make it happen.
你不可能永远等下去，去做点儿什么，让一切成真
LR.程先生的头像-懒人Blog(资源素材网)SVIP钻石会员
相关推荐
评论 共23条

请登录后发表评论

    只看作者
    • psqq2008的头像-懒人Blog(资源素材网)SVIP钻石会员psqq2008徽章-初出茅庐-懒人Blog(资源素材网)等级-冒泡-懒人Blog(资源素材网)0
      难怪刚刚在天上没看见你呢，原来是下凡了
      4个月前重庆
    • soulkai的头像-懒人Blog(资源素材网)SVIP钻石会员soulkai徽章-初出茅庐-懒人Blog(资源素材网)等级-活跃-懒人Blog(资源素材网)0
      我有你这才华，睡觉都能笑醒！
      4个月前天津
    • pxxox的头像-懒人Blog(资源素材网)pxxox徽章-初出茅庐-懒人Blog(资源素材网)等级-潜水-懒人Blog(资源素材网)0
      感谢作者精妙绝伦的文章！
      4个月前贵州
    • biantp的头像-懒人Blog(资源素材网)SVIP钻石会员biantp徽章-初出茅庐-懒人Blog(资源素材网)等级-潜水-懒人Blog(资源素材网)0
      我今天会很忙，忙着夸夸你
      6个月前山东
    • lemoqm的头像-懒人Blog(资源素材网)lemoqm等级-潜水-懒人Blog(资源素材网)0
      我今天会很忙，忙着夸夸你
      7个月前甘肃
    • toto21的头像-懒人Blog(资源素材网)toto21等级-潜水-懒人Blog(资源素材网)0
      一刷到你的文章就开心得冒泡 转载请注明来源: https://www.lanrenn.cn/1997.html
      8个月前广东
    • aaqqzz的头像-懒人Blog(资源素材网)aaqqzz徽章-初出茅庐-懒人Blog(资源素材网)等级-潜水-懒人Blog(资源素材网)0
      我上辈子可能是碳酸饮料，一刷到你的文章就开心得冒泡
      8个月前广东
    • 2473267776w的头像-懒人Blog(资源素材网)2473267776w等级-潜水-懒人Blog(资源素材网)0
      今天只干成了一件像样的事，那就是看你的文章
      8个月前天津
    • 中文的头像-懒人Blog(资源素材网)中文徽章-初出茅庐-懒人Blog(资源素材网)等级-冒泡-懒人Blog(资源素材网)0
      请继续发散你的优秀魅力！
      9个月前湖北
    • sadkki的头像-懒人Blog(资源素材网)sadkki徽章-初出茅庐-懒人Blog(资源素材网)等级-吐槽-懒人Blog(资源素材网)0
      墙都不服，就服懒人Blog-lanrenn.cn！
      9个月前山东
    • 苏晨的头像-懒人Blog(资源素材网)苏晨徽章-初出茅庐-懒人Blog(资源素材网)等级-潜水-懒人Blog(资源素材网)0
      我上辈子可能是碳酸饮料，一刷到你的文章就开心得冒泡
      9个月前辽宁
    • yiwu的头像-懒人Blog(资源素材网)yiwu等级-潜水-懒人Blog(资源素材网)0
      我今天会很忙，忙着夸夸你
      11个月前广东
广告图片
懒人资源网-WordPress主题美化-资源素材交流社区-懒人官网
随机看看好帖需要善于发现
我也要发帖

热门圈子总有聊不完的话题
发现更多圈子
02 : 14 : 41
2025年4月16日星期三
付费资源
100积分
安全资源
自动发货
永久使用

1【已失效】图集岛网站破解vip看图脚本-超高清套图免费看无限制

29个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成

3CleanMyMac X 4.13.4 强大的Mac系统清理优化工具[一键安装免激活]

4伪装上架-两款iOS影视追剧软件！赶紧下载安装

5photoshop 2021 for mac(M1/M2专用)中文激活永久使用

6丝丝吧网站破解vip看女神写真脚本-4K超高清写真视频免费看无限制

7阿里妈妈方圆体-简体中文双轴可变商用字体免费下载

8子比主题美化-底部页脚排版+各种认证图标以及渐变时间运行

1腾龙网上注册会员开户

2腾龙公司申请办理游戏注册流程步骤

3腾龙公司游戏注册会员账号

4腾龙公司怎么注册会员账号

52025年腾龙公司还开着吗、如何联系注册开户

6腾龙公司会员账号登录不上怎么办?TL10177.c0m

7XMind Pro For Mac v25.01.01061 思维导图软件中文版

8极简会员等级图标

1腾龙公司怎么联系游戏注册流程步骤

2网站左侧悬浮图片竖行横幅代码教程带关闭按钮

3VMWARE虚拟机好用吗 VMWARE虚拟机和PD哪个好

4矢量文件怎么制作 做矢量图形用什么软件

5子比主题美化 – 动态灵动岛样式代码教程

6子比主题教程：分享一个简单实用的标题-分割线布局样式

7API接口代码：使用PHP实现时间段温馨提示接口

8wordpress教程：侧边栏小工具添加动态时钟与问候语组件教程

1腾龙公司游戏注册网址多少

2七猫免费阅读小说 7.5.20 会员版（v2、去更新）

3wordpress教程-子比主题网站右键菜单内容自定义美化

4Adobe Prelude 2017 CC SP免激活中文版视频采集预览软件免费下载

5国内桌面PC端ChatGPT4.0中文在线win/Mac版-Ai绘画论文智能对话办公[下载即用]

6小程序卡密系统,微信小程序发卡系统带后台管理,多种卡密领取模式,带流量主功能

7[永久版]-Adobe Bridge 2024 免激活简体中文版Br软件[Win10/Win11][1.86GB]

8WordPress修改-子比主题置顶文章加入到显示文章数量内[新版]

【已失效】图集岛网站破解vip看图脚本-超高清套图免费看无限制-懒人Blog(资源素材网)
1.2W+人已阅读
【已失效】图集岛网站破解vip看图脚本-超高清套图免费看无限制
TOP1
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成-懒人Blog(资源素材网)
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成
2年前1.1W+人已阅读
TOP2
CleanMyMac X 4.13.4 强大的Mac系统清理优化工具-懒人Blog(资源素材网)
CleanMyMac X 4.13.4 强大的Mac系统清理优化工具[一键安装免激活]
2年前5581人已阅读
TOP3
伪装上架-两款iOS影视追剧软件！赶紧下载安装-懒人Blog(资源素材网)
伪装上架-两款iOS影视追剧软件！赶紧下载安装
2年前4723人已阅读
TOP4
photoshop 2021 for mac(M1/M2专用)中文激活永久使用-懒人Blog(资源素材网)
photoshop 2021 for mac(M1/M2专用)中文激活永久使用
2年前3690人已阅读
TOP5
丝丝吧网站破解vip看女神写真脚本-4K超高清写真视频免费看无限制-懒人Blog(资源素材网)
丝丝吧网站破解vip看女神写真脚本-4K超高清写真视频免费看无限制
11个月前3237人已阅读
TOP6

加入本站同款主题分享计划

  • 获得官方的优惠扶持！
  • 获得本站主题美化专题免费支持！
  • 还可以获得本站vip会员支持
￥20

优惠价:

立即加入
标签云
子比主题美化子比主题wordpress教程小工具WordPress免激活中文版字体ChatGPT小程序个人主页ExcelChatGPT源码个人导航WordPress主题子比美化教程文字广告短视频Typecho主题子比主题插件图片广告侧边栏插件api接口小游戏源码css黑神话悟空子比主题教程悬浮广告引导页子比插件小红书苹果CMShtml源码Ai智能对话htmlPHP代码商用字体激励广告模板等级图标抖音付费进群wordpress模板复制弹窗视频素材悬浮按钮倒计时
国内安卓ChatGPT4.0中文在线手机版-文档论文Ai智能对话模式-懒人Blog(资源素材网)
懒人资源网-WordPress主题美化-资源素材交流社区-懒人官网
广告合作-懒人Blog(资源素材网)
国内安卓ChatGPT4.0中文在线手机版-文档论文Ai智能对话模式-懒人Blog(资源素材网)
懒人资源网-WordPress主题美化-资源素材交流社区-懒人官网