<div id="header">
<!-- 這里是頁眉的內容 -->
</div>
<div id="content">
<!-- 這里是中間區域的內容 -->
</div>
<div id="footer">
<!-- 這里是頁腳的內容 -->
</div>

接下來，我們可以使用CSS來設置這些區域的樣式。我們可以使用id選擇器來分別選擇這些區域，例如：

#header {
background-color: #333;
color: #fff;
height: 80px;
}
#content {
margin: 0 auto;
width: 800px;
}
#footer {
background-color: #333;
color: #fff;
height: 60px;
}

在上面的代碼中，我們設置了頁眉和頁腳的背景顏色和文字顏色。我們還設置了頁眉的高度為80像素，頁腳的高度為60像素。在中間區域，我們使用了margin屬性來讓它居中，并設置了它的寬度為800像素。

除了設置框架的樣式之外，我們還可以使用CSS來設置網頁的布局。例如，我們可以使用float屬性來讓兩個元素并排顯示：

#left {
float: left;
width: 300px;
}
#right {
float: right;
width: 300px;
}

在上面的代碼中，我們設置了一個左側元素和一個右側元素，它們的寬度都為300像素，并且左側元素使用了float:left來讓它在左側浮動。右側元素使用了float:right來讓它在右側浮動。

總之，CSS是一個非常有用的工具，它可以幫助我們設置網頁的框架和布局。通過使用CSS，我們可以讓整個網站看起來更加整潔、美觀。