CSS（層疊樣式表）是前端開發中不可缺少的技術之一。它不僅可以使網頁看起來更美觀，還能通過布局設計來提高用戶體驗。在這篇文章中，我們將介紹如何使用 CSS 來繪制頁面布局。

首先，在使用 CSS 進行頁面布局之前，需要先明確頁面的布局結構。常見的頁面布局有兩種：盒式布局和表格布局。盒式布局的特點是利用 div+float 屬性進行排版，而表格布局則是利用 table 標簽及其相關屬性來實現。不過，隨著新版本的 HTML 和 CSS 推出，越來越多的人開始使用 CSS 的彈性布局來實現頁面布局，因為它具有靈活性和響應式的特點。

/* 盒式布局 */
.container {
width: 960px;
margin: 0 auto;
}
.header {
height: 80px;
background-color: #eee;
}
.nav {
width: 200px;
height: 400px;
background-color: #ddd;
float: left;
}
.main {
width: 760px;
height: 400px;
background-color: #ccc;
float: left;
}
.footer {
height: 120px;
background-color: #bbb;
}
/* 表格布局 */
table {
width: 960px;
margin: 0 auto;
}
tr {
height: 80px;
background-color: #eee;
}
td.nav {
width: 200px;
height: 400px;
background-color: #ddd;
}
td.main {
width: 760px;
height: 400px;
background-color: #ccc;
}
tr.footer {
height: 120px;
background-color: #bbb;
}
/* 彈性布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.header {
width: 960px;
height: 80px;
background-color: #eee;
}
.nav {
width: 200px;
height: 400px;
background-color: #ddd;
}
.main {
width: 760px;
height: 400px;
background-color: #ccc;
}
.footer {
width: 960px;
height: 120px;
background-color: #bbb;
}

通過以上的代碼，我們可以看出不同布局方式的 CSS 代碼。在盒式布局和表格布局中，需要固定寬度和高度的屬性，而在彈性布局中，我們只需要使用 display: flex; 就可以實現自適應的頁面布局了。

最后，值得注意的是，CSS 的布局方式應該根據需求場景來決定。在實現復雜布局時，我們可能需要使用多種布局方法，而在制作簡單頁面時則可以使用相對簡單的 CSS 布局。