CSS布局是網頁設計的基礎，它決定了網頁元素的位置，大小及樣式。當我們打開一個網站時，通常首先看到的就是整潔有序的布局。下面讓我們來學習一些基本的CSS布局。

/* 基礎CSS布局代碼 */
header {
background-color: #333;
color: #fff;
height: 80px;
padding: 20px;
}
nav {
float: left;
width: 20%;
height: 400px;
background-color: #444;
color: #fff;
padding: 20px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px 0;
}
main {
float: right;
width: 80%;
height: 400px;
background-color: #eee;
padding: 20px;
}
footer {
clear: both;
background-color: #333;
color: #fff;
height: 80px;
padding: 20px;
}

上述代碼包含header、nav、main、footer四個塊級元素和一個無序列表。以下是它們各自的作用：

header：通常包含站點的標題和logo

nav：網頁導航，是頁面的主要結構，包含了網頁的主要鏈接

main：它是網站主要內容的部分，通常包含了文章內容、圖片等

footer：包含版權信息、聯系方式等

ul和li：無序列表是最常用的列表類型，通常用于顯示多個鏈接內容

通過這樣的布局，我們可以輕松地構建一個基礎的網站，展示我們想要呈現的信息成功地傳達給訪問者。