頁面布局是Web設計中非常重要的一個方面。 CSS（層疊樣式表）代碼的主要目的就是為我們的頁面布局提供樣式。通過 CSS，我們可以使用各種樣式來定制我們的頁面布局，包括大小、顏色、字體等等。 下面是一個基本的頁面布局 CSS 代碼模板：

// 重設默認值
* {
margin: 0;
padding: 0;
}
// 設置頁面寬度和對齊方式
body {
width: 100%;
text-align: center;
}
// 設置標題樣式
h1 {
font-size: 36px;
font-weight: bold;
color: #333;
margin-top: 40px;
margin-bottom: 20px;
}
// 設置導航菜單樣式
.nav {
width: 100%;
height: 50px;
background-color: #333;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
.nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px;
}
// 設置內容區樣式
.content {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: left;
}

在這個 CSS 代碼模板中，我們可以看到了三個主要的部分：重設默認值、設置頁面布局、以及樣式設置。 在“重設默認值”的部分，我們使用了星號選擇器來將所有元素的 margin 和 padding 都設為 0。這樣做可以防止瀏覽器的默認樣式干擾我們的頁面布局。 在“設置頁面布局”的部分，我們設置了 body 的寬度和文本對齊方式，這樣就可以讓頁面內容居中顯示。我們還定義了一個 nav 類用于設置導航菜單和一個 content 類用于設置內容區。 在“樣式設置”的部分，我們設置了 h1、nav、li、a 等元素的樣式。通過這些樣式的設置，我們可以調整顏色、字體大小、邊距、背景顏色等等。 總的來說，一個好的頁面布局 CSS 代碼模板可以幫助我們快速構建出漂亮的網頁。通過良好的頁面布局，我們可以讓用戶更容易地瀏覽和理解頁面內容，提高網站的用戶體驗。