作為前端開發的基礎，css的重要性不言而喻。而在網站設計中，正確使用css布局也是至關重要的。下面我們來看一個優秀的css布局網站設計案例。

/* CSS 代碼 */
body {
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.header {
width: 100%;
height: 80px;
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav {
display: flex;
}
.nav li {
list-style: none;
margin-left: 20px;
}
.nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.banner {
height: 400px;
background-image: url('banner.jpg');
background-size: cover;
background-position: center center;
}
.main {
flex-grow: 1;
padding: 40px;
display: flex;
flex-wrap: wrap;
}
.article {
flex-basis: 70%;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar {
flex-basis: 30%;
padding: 0 20px;
}
.footer {
height: 100px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}

在這個網站中，我們可以看到使用了flex布局，確保內容的合理排布和響應式表現。整體布局采用了容器嵌套來控制寬度，并支持靈活的響應式布局。頭部導航使用了flex的彈性盒子模型，使得導航元素可以自適應排布和布局方向。主要內容區域在寬度分配上同樣采用了flex的特性，從而支持視窗寬度的變化。頁腳單獨使用了一個容器，并使用了彈性盒子模型來垂直居中內容。