網站製作學習誌

常常有人問樂多如何製作三欄樣版？以目前的樂多 DOM 不太可能單純以 CSS 完成，不過這幾天看了許多網友的 Blog ，發現一個滿有趣的方法。透過搭配 JavaScript (不是 Java 喔，別搞混了) ，我們來試試這個超級任務。

補充：樂多目前有三欄版型可供選擇，大家可以直接使用它們或修改它們。這篇文章的目的在於記錄我自己在 CSS 三欄式版面的製作心得，大家參考看看就好囉。

首先，我們準備一個 JavaScript 檔，內容為：

document.write('</div><div id="links2">');

儲存時，命名為 links2.js ，然後將它上傳到樂多的檔案空間，並記下上傳後的 URL。

接著我們到樂多 Blog 的管理介面，新增一個 JavaScript 型態的插入欄位 (Links2)，URL 就把剛剛記下來的 URL 貼上去。

然後我們把新增的這個 JavaScript 的插入欄位順序調整到我們想分離的位置之前，如下圖：

如此一來，從「版權聲明」以下的插入欄位，都會被歸到 #links2 去了。

接下來就是我們的重頭戲 - CSS ：

html, body {
	margin: 0;
	padding: 0;
	font-size: 10pt;
}

#container {
	position: relative;
	left: 50%;
	padding-top: 100px;
	margin-left: -380px;
	width: 760px;
}

#banner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100px;
}

#links {
	position: relative;
	top: 0;
	float: left;
	width: 150px;
	margin-right: -150px;
	background-color: Aqua;
}

#links2 {
	position: absolute;
	width: 150px;
	top: 100px;
	left: 0px;
	background-color: Fuchsia;
}

#content {
	position: relative;
	top: 0;
	padding-left: 150px;
	width: 510px;
	float: left;
	background-color: #FFEBCD;
}

這裡僅大概介紹其設定方式：

1. 將 #container 置中，並在上面留下 100px 的高度。
2. 將 #banner 設為 position: absolute ，並將它的高度設為 100px 且移到 #container 的左上角。
3. 將 #content 和 #links 設為向左浮動，可參考先前的「樂多 Blog 排版入門」。
4. #links2 設為 position: absolute ，然後將它貼在 #container 的左方，從上數下來 100px 的位置。
5. #content 在左方留下 150px 的空間，以容納 #links2 。

剩下就交給有興趣的朋友自行變化囉。