CSS（層疊樣式表）已成為Web設(shè)計(jì)的重要組成部分，并且在現(xiàn)代網(wǎng)站中扮演著至關(guān)重要的角色。在這里，我們將學(xué)習(xí)如何使用CSS自適應(yīng)布局來制作一個(gè)簡單的實(shí)例。

首先，我們需要為HTML文檔創(chuàng)建一個(gè)基本布局。我們可以使用一個(gè)簡單的分欄網(wǎng)格為基礎(chǔ)模板，如下所示：

<div class="container"><div class="col-1"></div><div class="col-2"></div><div class="col-3"></div></div>

接下來，我們需要使用CSS樣式表對(duì)該布局進(jìn)行樣式調(diào)整，并為其添加自適應(yīng)功能。

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
justify-content: space-between;
}
.col-1 {
flex: 1;
background-color: #ccc;
height: 300px;
}
.col-2 {
flex: 2;
background-color: #aaa;
height: 500px;
}
.col-3 {
flex: 1;
background-color: #eee;
height: 400px;
}
@media screen and (max-width: 768px) {
.container {
flex-wrap: wrap;
}
.col-1, .col-2, .col-3 {
flex-basis: 100%;
}
}

在上面的CSS代碼中，我們定義了container類，它將所有列作為其子元素進(jìn)行排列，并在容器中添加了空間。然后，我們定義了每列的寬度、高度以及背景顏色。我們還添加了一個(gè)媒體查詢，以確保在屏幕寬度小于768px時(shí)，列會(huì)從一行變?yōu)槎嘈校⑶颐總€(gè)列將填充其父元素的寬度。

現(xiàn)在，我們就可以使用這個(gè)自適應(yīng)布局思路，為自己的網(wǎng)站設(shè)計(jì)一個(gè)響應(yīng)式頁面了！