CSS半欄圖是一種非常常見的網頁設計布局，它將頁面分為兩個等寬的部分，在左側顯示內容，在右側顯示相關信息、廣告或其他補充內容。以下是一個基本的CSS半欄圖的實現方法：
<!DOCTYPE html>
<html>
<head>
<title>CSS半欄圖</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.left-column {
float: left;
width: 50%;
}
.right-column {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<h2>左側內容區域</h2>
<p>這里是左側的內容區域，可以放置文章、圖片、視頻等內容。</p>
</div>
<div class="right-column">
<h2>右側補充區域</h2>
<p>這里是右側的補充內容區域，可以放置廣告、相關文章、標簽云等內容。</p>
</div>
</div>
</body>
</html>以上代碼中，我們首先定義了一個容器（.container）將內容區域和補充內容區域包裹起來。容器的寬度為960px，且利用margin:0 auto將其居中顯示。
接著，我們定義了兩個列（.left-column與.right-column），它們的寬度均為50%，分別使用float:left和float:right屬性將它們左右浮動。這樣容器中的左側區域就會在左邊，右側區域會在右邊。
在這個基礎上，我們可以根據具體需要對左側區域和右側區域進行進一步的設計與排版，使頁面更加美觀和實用。
上一篇MySQL數據庫遺忘密碼
下一篇css半透明漸變這找