理想情况下您会看到内容区域首先

Arzina555

在这种情况下假定默认跨越一列或一行。使用速记代码的网格布局示例的图片来源将保持不变网格在前端看起来也一样。圣杯布局您可能已经注意到许多网页都有类似的结构。顶部有页眉底部有页脚中间是内容区域。该内容区域位于两列之间。假设您要查看这些页面的源代码。出现然后是两列。在网格出现之前这是很难实现的。使用网格这很容易。下面我们将看一下被称为圣杯布局的代码和布局。下面是定义标题导航侧边栏主要内容元素。

右侧边栏元素和页脚的。请注意如果您愿意可以将项替换为另一个元素。这是定义网格和网格项的。请注意我使用单位来定义每一列。单位表示网格容器中可用空间的一小部分而不是设定量并确保网格轨道根据可用空 数字数据 间增长和缩小。请注意我还使用了三种不同的值类型来定义行的轨道大小。我还将每个网格项目由星号表示制作成具有中心对齐和合理内容的弹性项目。现在是时候设置内容的样式了。首先我将更改标题导航文章旁白和页脚元素的背景颜色和填充。然后我将和属性。



设置为和以便它们跨越网格的长度。最后我将为文章元素设置最小宽度以便主要内容占据页面的大部分。这是前端的结果使用网格模型的圣杯布局经典博客布局您可以使用网格创建另一个类似且极其流行的布局称为经典博客布局。此布局还具有全角页眉和页脚以及内容区域但它有一个侧边栏而不是两个。这是这是这是前端的结果使用网格的经典博客布局如上面的示例所示网格被设计为一种灵活的解决方案可应用于不同的用例。虽然无论您的情况如何此布局工具的基本概念都。