網頁是信息化時代的產物，它允許我們以各種形式將信息直觀地呈現出來。為了使網頁的內容結構更清晰，我們可以將頁面分成4部分。這篇文章將介紹如何使用 CSS 實現頁面分成4部分。

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 部分，并為每個部分設置不同的樣式。這種簡單而有效的布局方案可以幫助我們更好地組織網頁內容并提升用戶體驗。