css 页面分成4部分 |vue import css 路径

body {
display: grid;
grid-template-rows: 1fr 3fr 1fr 2fr;
}

首先在 CSS 中定义网页的样式。大家可以使用 grid 布局将页面分成 4 行。第一行和第三行用于头部和底部，中间两行用于主体内容。

header {
grid-row: 1 / 2;
}
main {
grid-row: 2 / 4;
}
footer {
grid-row: 4 / 5;
}

接下来大家为每个部分定义样式。使用 grid-row 属性将这些部分放入网页的不同行中。

header {
background-color: #333;
color: #fff;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}

最后大家可以为每个部分设置背景颜色、内边距、字体颜色等样式属性以美化网页。

通过这样的代码，大家可以将网页清晰地分成 4 部分，并为每个部分设置不同的样式。这种简单而有效的布局方案可以帮助大家更好地组织网页内容并提升用户体验。