CSS頁面布局是Web開發(fā)中非常重要的一部分。良好的頁面布局可以讓網(wǎng)站更加美觀、易于閱讀，從而吸引用戶。而四塊頁面布局則是一種非常基礎(chǔ)的布局方式。

#header {
background-color: #444;
color: #fff;
height: 100px;
text-align: center;
}
#nav {
background-color: #ccc;
height: 400px;
width: 100px;
float: left;
}
#content {
background-color: #eee;
height: 400px;
margin-left: 100px;
margin-right: 100px;
}
#footer {
background-color: #444;
color: #fff;
height: 100px;
clear: both;
text-align: center;
}

四塊頁面布局通常由四個主要的DIV組成：header（頁頭）、nav（導(dǎo)航菜單）、content（內(nèi)容區(qū)）以及footer（頁腳）。這些DIV的樣式可以通過CSS來設(shè)置。在以上示例中：

#header設(shè)置了背景顏色、高度、文本顏色以及居中對齊方式；

#nav設(shè)置了背景顏色、高度、寬度以及浮動方式；

#content設(shè)置了背景顏色、高度以及左右外邊距，使其能夠與nav分隔開；

#footer設(shè)置了背景顏色、高度、文本顏色以及清除浮動。由于nav浮動，如果不清除浮動，可能會導(dǎo)致footer與nav有重疊。

四塊頁面布局適用于很多類型的網(wǎng)站，如博客、電子商務(wù)網(wǎng)站等等。它簡單、易于學(xué)習(xí)和掌握，是許多初學(xué)者入門學(xué)習(xí)布局的不錯選擇。