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

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

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

1

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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 。

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