文章卡片和文章列表

本文共551 个字, 需约2 分钟阅读。本文最后更新时间为2024年11 月2日, 部分内容具有时效性,如有失效请留言告知,阅读量:870 阅读


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

卡片模式 x5

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

HTML
/*文章卡片排列X5 huliku.com*/
@media (min-width: 769px) {
    .posts-item.card {
        width: calc(20% - 16px);
    }
}
HTML

括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!

需要多个列表修改百分比即可,5个=20%以此类推。

列表模式 x2

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

HTML
/*文章列表排列X2 huliku.com*/
@media (min-width: 1500px) {
  .posts-item {
    display: inline-flex;
    width: calc(50% - 16px);
  }
}
HTML

括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!

需要多个列表修改百分比即可,2个=50%以此类推。

注:双列模式下文章形式为“图库”会有几率影响版面错乱。

全篇结束