CSS三層布局是一種常用的網頁布局方式，它將頁面分為三層：頭部（header）、主體（main）和底部（footer）。每一層都可以單獨設計樣式和布局，使網頁更加美觀和易讀。
通常情況下，CSS三層布局可以通過塊級元素和浮動元素來實現。以下是一個基本的三層布局示例：
<!DOCTYPE html>
<html>
<head>
<title>CSS三層布局</title>
<style>
body {
margin: 0;
}
header {
background-color: #333;
color: #fff;
height: 50px;
}
main {
float: left;
width: 75%;
background-color: #f2f2f2;
min-height: 500px;
}
footer {
clear: both;
background-color: #333;
color: #fff;
height: 50px;
}
</style>
</head>
<body>
<header>
<h1>CSS三層布局</h1>
</header>
<main>
<p>這是主體內容。</p>
</main>
<footer>
<p>版權 ? 2021。</p>
</footer>
</body>
</html>在上面的代碼中，我們定義了三個塊級元素：header、main和footer。header和footer都固定在頁面頂部和底部，并使用了相同的高度和背景顏色，這樣可以增加網頁的整體協調性。main元素使用float屬性和寬度設定，使其占據瀏覽器窗口的75%寬度，同時在瀏覽器窗口無法顯示完整時，則自動出現滾動條。
通過這種CSS三層布局方式，我們可以輕松構建出簡單但功能強大的網頁，同時使頁面更加美觀整潔，提高用戶的閱讀體驗。