css - 如何为模板化布局布局 HTML 和 CSS

Question

我正在从事的元素需要使用 HTML5 和 CSS 集成一项新功能。要求是系统的每个用户都可以选择几种预配置布局中的一种来查看内容。因此，用户可能会选择以下三种布局之一:

• 内容因用户选择的布局而异。 (例如 D 在布局 1 中但不在布局 3 中)
• 每个内容 block 都有自己的 CSS
• 无论位置如何，每个内容 block 的 css 都是相同的
• future 可能会有更多布局。

我有一些想法，并且在 Google 上搜索了一些想法，但我似乎无法找到合适的东西来要求 Google 到达我需要去的地方。

我的想法:

• 为每个布局准备一个样式表，并根据用户的选择更改样式表。始终包含页面上每个内容 block 的样式。
• 在服务器上为每个用户构建 css，并且只发送该布局所需的 css

谢谢!

Answer 1

看起来你问的更多是“最佳方法”问题，而不是“我该怎么做”

我建议制作一个包含所有 block 的容器，然后根据用户想要的任何布局为容器指定一个类名。使用 CSS，您可以“级联”您的“样式”。

例如

<div class="layout-1">
    <div class="block-a">A</div>
    <div class="block-b">B</div>
    <div class="block-c">C</div>
    <div class="block-d">D</div>
    <div class="block-e">E</div>
    <div class="block-f">F</div>
    <div class="block-g">G</div>
</div>

现在，您的 CSS 将单独包含所有 block 的样式:

.block-a {
    /*style*/
}
.block-b {
    /*style*/
}
...etc...

然后相同 CSS 的另一部分将具有依赖于容器类名的布局:

.layout-1 .block-a {
    /*Block A's position*/
}
.layout-1 .block-b {
    /*Block B's position*/
}
...etc...
.layout-1 .block-e {
    display:none;
}

然后你会有你的第二个布局:

.layout-2 .block-a {
    /*Block A's position*/
}
.layout-2 .block-b {
    /*Block B's position*/
}
...etc...
.layout-2 .block-e {
    display:block;
    /*Block E's position*/
}

因此，当用户选择布局时，保存布局样式，当您在页面上呈现它时，确保设置了适当的容器类。然后它将显示适当的布局。因此，您真正需要保存的只是用户的布局类型，然后当您提取用户信息时，只需使用该信息更新容器的类即可。