CSS三列布局圖是網頁設計中至關重要的一部分，它為網頁的版面提供了更多的可選擇性和多樣性。下面我們將會介紹如何通過CSS來實現一個簡單的三列布局圖。

<div class="container">
<div class="left">
<p>左側內容區域</p>
</div>
<div class="main">
<p>主要內容區域</p>
</div>
<div class="right">
<p>右側內容區域</p>
</div>
</div>

其中，關于CSS樣式的定義如下：

.container {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
width: 20%;
}
.main {
float: left;
width: 60%;
}
.right {
float: left;
width: 20%;
}

以上的CSS代碼中，我們通過使用CSS屬性float和width來定義三列布局圖的樣式。其中，float屬性定義了元素在其應該被放置的區域內的浮動方向，而width屬性定義了元素的寬度。

同時，我們也需要設置父級元素.container的寬度，以便使得三個子元素能夠平分整個頁面的寬度。

總的來說，CSS三列布局圖的實現是一個重要的網頁設計技術，同時也需要我們掌握一定的CSS代碼知識和運用能力。