在web開發中，三欄布局是一個非常經典的布局方式。其中，左右兩欄為固定寬度，中間的欄寬度自適應填充剩余空間。下面是使用CSS實現三欄布局的示例代碼：

<div class="wrapper">
<div class="left">
這是左側欄
</div>
<div class="right">
這是右側欄
</div>
<div class="content">
這是主要內容區
</div>
</div>

接下來，我們將使用CSS來對這些元素進行樣式設計。

/* 對父容器進行樣式設計 */
.wrapper {
display: flex;   /* 使用flex布局 */
justify-content: space-between;   /* 左右兩欄之間留有空隙 */
align-items: flex-start;   /* 上下對齊 */
padding: 20px;
}
/* 對左側欄進行樣式設計 */
.left {
width: 200px;   /* 左側欄寬度為200px */
}
/* 對右側欄進行樣式設計 */
.right {
width: 200px;   /* 右側欄寬度為200px */
}
/* 對主要內容區進行樣式設計 */
.content {
flex: 1;   /* 中間欄自適應填充剩余空間 */
margin: 0 20px;   /* 左右兩欄之間留有空隙 */
}

最后，我們可以看到一個基本的三欄布局已經完成了。根據需要，我們可以對其中的細節進行調整，例如添加背景顏色、邊框等。