这会创建一个不对称的设计，

RAHIM23

在我的主要内容和支持它的文章之间有一列空白复制 只需几行代码即可添加高级 JavaScript 组件，例如数据网格、图表、调度程序和日历。 30 天免费试用 重新排序和旋转 # CSS 网格现在是用于实现灵感布局的最佳工具，其强大的属性对于开发复杂的版式设计也很有用。 左：阉割。书封由设计。右图：使用 CSS Grid 和 Flexbox 开发的复杂标题设计。（大预览） 我的标题包含一个标题，后跟两个段落，它们在 HTML 中的顺序意味着在不应用任何样式的情况下阅读它们时它们是有意义的： 而不是任何视觉呈现，因此为了允许我以视觉方式重新排序元素，我将 Flexbox 属性添加到我的标题和列的 flex-direction 值： h复制 默认情况下，元素按照它们在 HTML 中出现的顺序出现，但在我的 丹麦电话号码表   设计中，此标头中的最后一段首先出现在标题上方。

所有元素的默认顺序值为 0，因此为了在不改变 HTML 的情况下更改该段落的位置，我添加了负值 -1，将其置于顶部相结合，可以实现此标头中三个元素的不寻常对齐。尽管一开始可能并不明显，但我将标题和此标题中的段落放置在四列对称网格上。将第一行和最后一行中的一列留空会创建动态对角线，这会增加此标题的趣味性： 复制 动态对角线增加了此标题的趣味性。（大预览） 我的标题遍布所有四栏：  复制 虽然第一个出现在标题底部，但将第一列留空： 复制 最后一段（现在位于标题顶部）跨越前三列，在左侧留下一个空格： header p:last-of-type { grid-column: 1 / 4; } 复制 在网络上看到旋转的文本元素并不常见，但当您看到它们时，它们通常令人难忘，并且总是令人惊喜。我希望我的标题逆时针旋转，因此我添加了一个变换，将其负旋转 30 度并将其垂直向下移动 150 像素em 或 rem 为单位的原点。 50% 50%、0 0、100% 0、100% 100% 和 0 100% 变换原点值的结果。




（大预览） 为了获得额外的惊喜，我在该转换中添加了一个微妙的过渡，并减少了当有人将光标移到我的标题上时的旋转量：复制 CSS 网格现在是用于实现灵感布局的最佳工具。（大预览） 组合标题元素 # 左：Graphis 年度报告。中：美国展示柜引用了美国国旗。右：我的设计参考了英国的国旗。（大预览） 在我的下一个受 Lubalin 启发的设计中，我将 Cortina 模型的有序列表与彩色标题相结合，通过此标题做出强有力的声明：复制 标记我的 Cortina 型号列表及其制造年份的最语义选择是有序列表。为了强烈强调每个模型名称，我将它们包含在强大的元素中，这些元素提供语义值以及默认浏览器样式的粗体外观：本文介绍了 React Hooks 的规则以及如何在项目中有效地开始使用它们。