在網頁的設計中，頁面布局是其中最為重要的一環。CSS可以幫助我們簡單而便捷地設計出美觀的頁面布局。下面就通過一個簡單的例子來展示如何使用CSS實現頁面布局。

html{  
height: 100%;  
}  
body{  
width: 100%;  
height: 100%;  
margin: 0;  
padding: 0;  
font-size: 16px;  
background-color: #fff;  
}  
.container{  
width: 960px;
margin: 0 auto;  
padding: 0;  
position: relative;  
}  
.header{  
width: 100%;  
height: 60px;  
background-color: #3498db;  
}  
.menu{  
width: 200px;  
height: 500px;  
float: left; 
background-color: #f1c40f;  
}  
.content{  
width: 760px;  
height: 500px;  
float: left; 
background-color: #fff;  
}  
.footer{  
width: 100%;  
height: 40px;  
background-color: #bdc3c7;  
position: absolute;  
bottom: 0;  
}

在上面的代碼中，我們使用了HTML和CSS來實現一個簡單的頁面布局。首先，我們將文檔的高度設置為100%，確保了整個文檔的高度充滿整個屏幕。接下來，我們定義了body的寬度、高度、邊距和內邊距等相關屬性，確保了頁面的主體內容能夠充滿整個屏幕。然后，我們使用類名為“container”的div標簽作為容器，用來包裹整個頁面。我們將該div的寬度設置為960像素，并將其水平居中。接著，我們定義了類名為“header”的div標簽來作為頭部，將其寬度設置為100%、高度為60像素，并設為藍色背景。然后，我們定義了類名為“menu”的div標簽作為菜單欄，將其寬度設置為200像素、高度設置為500像素，將其浮動到左側，并設為黃色背景。接著，我們定義了類名為“content”的div標簽作為主體內容區域，將其寬度設置為760像素、高度設置為500像素，將其浮動到左側，并設為白色背景。最后，我們定義了類名為“footer”的div標簽作為底部內容區域，將其寬度設置為100%、高度設置為40像素，設為灰色背景，并將其定位到頁面底部。

通過上述的CSS樣式定義，我們成功地實現了一個簡單的頁面布局。雖然這只是一個簡單的例子，但它展示了CSS在頁面布局中的重要作用和靈活性。通過靈活地運用CSS的相關屬性，我們可以輕松地構建出符合自己要求的美觀、實用的頁面布局。