在寫CSS布局之前，首先需要了解一下幾種布局方式：

1. 流動(dòng)布局
2. 固定布局
3. 彈性布局

流動(dòng)布局是最基本的布局方式，可以通過設(shè)置文本流中的元素的寬度和高度來實(shí)現(xiàn)。而固定布局則是通過設(shè)置元素固定的寬度和高度來布局。彈性布局則是根據(jù)屏幕尺寸的變化，自動(dòng)適應(yīng)元素的大小和位置來進(jìn)行布局。

下面我們進(jìn)入實(shí)踐部分，通過一個(gè)實(shí)例來進(jìn)行練習(xí)：

<style>
.container {
display: flex; /* 設(shè)置父元素的樣式為彈性布局 */
}
.left {
width: 200px; /* 左側(cè)菜單的固定寬度 */
background-color: #ddd;
}
.right {
flex: 1; /* 右側(cè)內(nèi)容區(qū)域的彈性伸縮比例 */
background-color: #eee;
}
</style>
<div class="container">
<div class="left">
<ul>
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>
</div>
<div class="right">
<p>右側(cè)內(nèi)容區(qū)域</p>
</div>
</div>

上述代碼實(shí)現(xiàn)了一個(gè)左側(cè)菜單，右側(cè)內(nèi)容區(qū)域的布局效果。其中，父元素設(shè)置了彈性布局，左側(cè)菜單的寬度設(shè)置為200px，右側(cè)內(nèi)容區(qū)域則根據(jù)屏幕尺寸的不同，自動(dòng)適應(yīng)比例。

通過不斷的實(shí)踐和實(shí)驗(yàn)，你會(huì)逐漸掌握各種布局方式，從而能夠更加熟練地運(yùn)用CSS來進(jìn)行網(wǎng)頁布局。