时间:2023-09-01 10:06:02 | 来源:网站运营
时间:2023-09-01 10:06:02 来源:网站运营
如何用 CSS 网格快速做出网站原型:简评:CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。
<div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div>
.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; }
稍后我们会添加更多代码,但首先我想解释一下。.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; }
grid-template-areas 属性背后的逻辑是你在代码中创建一个可视化的网格。你可以看到,它有 3 行、12 列。就像我们在定义 grid-template-columns 和 grid-template-rows 一样。.header { grid-area: h; } .menu { grid-area: m; } .content { grid-area: c; } .footer { grid-area: f; }
布局结果如下:grid-template-areas: “h h h h h h h h h h h h” "c c c c c c c c c c m m” “f f f f f f f f f f f f”;
结果就会变成:grid-template-areas: “. h h h h h h h h h h .” "c c c c c c c c c c m m” “. f f f f f f f f f f .”;
看起来是这样的:@media screen and (max-width: 640px) { .container { grid-template-areas: "m m m m m m h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f"; } }
结果看起来像这样: 关键词:原型