CSS經典布局是前端開發過程中不可或缺的一部分。在這篇文章中，我們將介紹一些經典的CSS布局設計，并且使用HTML和CSS代碼實現。

第一種布局是三欄布局。這種布局設計使用了一個容器，將網頁分為左、中、右三部分。HTML代碼如下：

<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

CSS代碼如下：

.container {
display: flex;
}
.left {
width: 25%;
background-color: #ccc;
}
.middle {
width: 50%;
background-color: #eee;
}
.right {
width: 25%;
background-color: #ccc;
}

第二種布局是水平居中布局。這種布局將元素垂直和水平居中。HTML代碼如下：

<div class="container">
<div class="center"></div>
</div>

CSS代碼如下：

.container {
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 200px;
height: 200px;
background-color: #eee;
}

第三種布局是圣杯布局。這種布局設計將網頁劃分為左、中、右三欄，將左右欄固定寬度，中間欄自適應寬度。HTML代碼如下：

<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

CSS代碼如下：

.container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.left {
width: 200px;
background-color: #ccc;
margin-left: -100%;
}
.middle {
flex: 1;
background-color: #eee;
}
.right {
width: 200px;
background-color: #ccc;
margin-right: -100%;
}

以上就是CSS經典布局的三種實例。CSS布局設計遠遠不止這三種，但是這三種布局設計可以幫助你更好地理解CSS基礎知識，并能夠在網頁設計中提供很好的靈感。