CSS（層疊樣式表）已成為Web設計的重要組成部分，并且在現代網站中扮演著至關重要的角色。在這里，我們將學習如何使用CSS自適應布局來制作一個簡單的實例。

首先，我們需要為HTML文檔創建一個基本布局。我們可以使用一個簡單的分欄網格為基礎模板，如下所示：

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

接下來，我們需要使用CSS樣式表對該布局進行樣式調整，并為其添加自適應功能。

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類，它將所有列作為其子元素進行排列，并在容器中添加了空間。然后，我們定義了每列的寬度、高度以及背景顏色。我們還添加了一個媒體查詢，以確保在屏幕寬度小于768px時，列會從一行變為多行，并且每個列將填充其父元素的寬度。

現在，我們就可以使用這個自適應布局思路，為自己的網站設計一個響應式頁面了！