仿致美化长图+宽图排版 - B2 美化

致美化是使用 B2 主题的，在美化这一方面，算得上是深度美化了，有很多有趣的地方我们可以来学习学习。

效果演示

我们模仿这一种

可以看到，在这一模块中，出现了两种图片比例，两种数量，

• 上面：长图，6 个
• 下面：宽图，8 个

为了模仿这种效果，我们可以用两个模块加上美化来实现类似的效果。

创建模块

我们需要创建两个区块，甲、乙，甲在第一个区块，乙在第二个区块。如下图：

甲

• 调用文章内容，列表样式一
• 选择文章分类
• 每行显示数量：6
• 每页显示数量：6
• 缩略图比例：3/5
• 是否显示加载更多按钮：隐藏

乙

• 调用文章内容，列表样式一
• 每行显示数量：4
• 每页显示数量：8
• 缩略图比例：4/2
• 是否显示加载更多按钮：隐藏

根据列表要求配置好模块，注意甲模块和乙模块的位置。

外观美化

1
.home_row_0 {margin-bottom: -6px;}
2
@media screen and (max-width: 768px) {
3
.home_row_0 .post-item-4 ul.b2_gap > li:nth-child(n+3) {display: none;}
4
.home_row_1 .post-item-5 ul.b2_gap > li:nth-child(n+5) {display: none;}
5
}

上面的代码需要放到主题根目录下的 style.css 底部，其中的数字，如果你放在第一个模块，那么数字为 0，第二个模块，数字为 1，以此类推

需要注意的是，这两个模块需要在一起，方便使用上面提供的 CSS 来美化外观样式。CSS 中的数字代表对应模块的 Class，各位看一下网页源代码就懂了。

相关帮助

不懂的就私聊我吧，免费教你用噢，1355471563