用过子比主题的都知道，首页列表卡片模式只能一行四个，列表模式一行一个，今天我们就尝试一下用代码来改变它的样式！最近发现很多站长朋友在问这个，趁今天有时间更新一下。
卡片模式 x5
![子比主题美化 – 文章列表显示修改 列表[一行两个]卡片[一行五个]](/wp-content/uploads/2026/09/12/1ac3a94d5772e2b11a0ee37f3fbe3763.webp)
代码投放：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式
列表模式 x2
![子比主题美化 – 文章列表显示修改 列表[一行两个]卡片[一行五个]](/wp-content/uploads/2026/09/12/86ad6f7251b1fbfdfbc58a85ffe1126c.webp)
代码投放：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式
其他相关
/*隐藏卡片列表内容并取消占位*/
.theme-bg{background: var(--main-bg-color);border-radius:10px;} /*大盒子背景，可以是图片，需要更改文件class，不更改应该也可以*/
.posts-item.card .item-tags{visibility: hidden;DISPLAY: none;} /*隐藏标签*/
.posts-item.card .item-meta{visibility: hidden;DISPLAY: none;} /*隐藏浏览量数据*/
/*卡片列表标题*/
.tab-content>.active {padding: 0px 10px;} /*边距*/
.index-tab ul>li.active { height: 40px;width: 100%;background: var(--muted-bg-color);border-radius:10px 10px 0px 0px;margin: 0;padding:8px 20px; } /*盒子标题样式背景*/
.index-tab ul>li.active a {color: var(--key-color)!important;font-weight:bold;vertical-align:text-top;} /*标题字体样式*/
.posts-item .item-heading {-webkit-line-clamp: 1;} /*文章标题行数从2行修改位1行*/
.posts-item.card .item-heading {min-height: 0;} /*文章标题盒子高度修改*/
重要提示
如有解压密码： 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性： 建议具有一定思考和动手能力的用户购买。
请谨慎考虑： 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知： 虚拟类商品，一经购买打赏赞助，不支持退款。请谅解，谢谢合作！
© 版权声明
THE END
暂无评论内容