子比主题美化—文章列表自定义显示,列表一行两个或多个 丨 卡片一行五个或多个-子比主题美化教程社区-推荐-安忆小屋

子比主题美化—文章列表自定义显示,列表一行两个或多个 丨 卡片一行五个或多个

用过子比主题的都知道,首页列表卡片模式只能一行四个,列表模式一行一个,今天我们就尝试一下用代码来改变它的样式!最近发现很多站长朋友在问这个,趁今天有时间更新一下。

卡片模式X5

图片[1]-子比主题美化—文章列表自定义显示,列表一行两个或多个 丨 卡片一行五个或多个-子比主题美化教程社区-推荐-安忆小屋

代码投放:网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式

列表模式X2

图片[2]-子比主题美化—文章列表自定义显示,列表一行两个或多个 丨 卡片一行五个或多个-子比主题美化教程社区-推荐-安忆小屋

代码投放:网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式

其他相关

/*隐藏卡片列表内容并取消占位 huliku.com*/
.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;}   /*文章标题盒子高度修改*/

温馨提示:本文最后更新于2024-09-03 06:52:22,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长

    没有回复内容

供学习和研究使用,请在下载后24小时内删除
购买前可以联系作者确认资源信息,防止交易矛盾

一键注册登录,免费下载更多的资源教程

Loading...
本页生成数据库 3 次查询,耗时 0.567 秒,使用 11.55MB 内存