這篇文章，算是我在 CSS 的學習中，一個段落的結束。其實 CSS 是非常有趣且多變的，多看看國內外一些利用 CSS 製作出來的優等網站，你就會了解 CSS 有多麼強大。這裡，我將以「樂多 Blog 」的版型製作，作為這篇文章的主題。在這之前，建議您先看看之前我所寫的 CSS 排版觀念系列文章。

第一步 了解頁面結構

要化粧前，也得先知道自己的臉屬於何種性質；同理我們也得先掌握樂多的 Blog 的頁面結構 (DOM) 。

檢視自己的樂多 Blog 首頁原始碼，你就可以看到以下的結構：

每個色塊都是一個 DIV ，而這裡我直接用 CSS 的表示法來標示 DIV 的 ID 。

再來我們分析 #content 和 #links ，如下圖：

一樣地，我用 CSS 表示法來標示每個區塊的 CLASS 屬性。

#content 就是我們的 Blog 記事區，而 #links 則是功能選單的集合體，這裡我們暫時不對細部的區塊作討論。

第二步 決定版型

沒有適當的動線規劃及版面設計，再豐富的網站內容也是枉然。在決定我們的 Blog 要長什麼樣子之前，應該要思考如何讓瀏覽者能夠方便地操作你所提供的功能。另外，一個好的視覺設計也是必要的，除非你想標新立異，那麼舒服的色系及精緻的版面都是你應該要追求的。

不過這裡我不多談如何設計這些視覺上的效果，畢竟我並非設計系出身；相關的知識可以請教身邊有美術涵養的高手們，他們會給你很好的建議。

這裡我決定實作全版面兩欄式的版型，其中 #container 及 #content 的寬度會隨著瀏覽視窗大小作動態調整，而 #links 則是固定寬度且靠在視窗右邊，如下圖：

至於背景圖的部份，就請大家自行發揮天份製作囉。

第三步 用 CSS 製作初步的畫面

首先，我們要把 body 和 #container 設定好，如下：

1
2
3
4
5
6
7

html, body {
margin: 0;
}
#container {
position: relative;
width: 100%;
}

首先我們將 html 和 body 的邊界設為 0 ，然後再把 #container 的寬度設為 100% 。

(註：你可以在建構版型時，利用背景色來讓自己知道區塊跑到哪兒去了。)

接下來，我們指定 #banner 的高度：

1
2
3

#banner {
height: 80px;
}

這裡我假設背景圖的高度是 80px ，當然你可以視需要自行更改。

然後我們利用浮動技巧，將 #content 放到左邊， #links 放到右邊。我們不指定 #content 的寬度，因為它會變動。我們僅需要固定住 #links 的寬度即可 (假設為 200px ) 。

1
2
3
4
5
6
7

#content {
float: left;
}
#links {
float: right;
width: 200px;
}

咦？為什麼還是沒有效果？ #links 並沒有跑到 #content 的右邊？而是跑到 #content 的右下方去了：

這是因為現在 #content 的內容區寬度是 100% ，所以 #links 被 #content 擠了下來。解決的方式是把 #links 的 margin-left 指定為負值，讓它往左拉回 200px ：

1
2
3
4
5

#links {
float: right;
width: 200px;
margin-left: -200px;
}

好啦，現在版面變成這樣：

呃…可是 #content 的內容和 #links 的內容疊在一起了，怎麼辦？很簡單，我們用 padding-right 把 #cotent 的內容往左擠進來：

1
2
3
4

#content {
float: left;
padding-right: 200px;
}

#footer 因為 #content 和 #links 浮動的關係，自動跑到上面來了。我們只要設定：

1
2
3
4

#footer {
clear: both;
height: 40px;
}

雖然 IE 不用設定就會正常 (其實是不正常) ，但是為了其他瀏覽器，一定要設定。

好啦，現在實際上的完整版面會變成這樣了：

#content 的可視寬度其實是和 #container 的內容區寬度一樣為 100%，虛線部份才是 #content 的內容區。

有幾點要注意：

1. #content 的內容寬度不可過長，不然會讓 #links 往下掉。
2. #footer 不一定會在 #content 下方出現，這要看 #content 和 #links 哪個元素較高而定。
3. #banner 、 #content 、 #links 、 #footer 屬於結構元素，所以除非必要，否則它們的 margin 、 padding 都應該要設成 0px ( DIV 預設值) 。
4. 如果要讓 #links 和 #content 左右對調，那麼就把 #content 和 #links 的 float 、 padding 和 margin 中之 left 改成 right ， right 改成 left 。
5. 配合這篇「如何正確實作出固定寬度且置中的版型」，只要更動 body 和 #container 的樣式，你就可以讓這個版型置中囉。

完整的 CSS 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html, body {
margin: 0;
}
#container {
position: relative;
width: 100%;
}
#banner {
height: 100px;
}
#content {
float: left;
padding-right: 200px;
}
#links {
float: right;
width: 200px;
margin-left: -200px;
}
#footer {
clear: both;
height: 40px;
}

第四步 裝飾其他部份

當然，上面的步驟只是把主要的版面結構定下來，裡面的彩妝還沒完成。礙於我的藝術涵養，就靠大家自行設計喜歡的樣式囉。不過還是有一些東西分享給大家。

前面我在這篇「拆開你的 CSS 吧！」提到 CSS 維護的觀念，在我們把上面主要的結構定義好後，就可以利用外部的 CSS 檔來裝飾其他部份。例如我們可以建立一個 banner.css ，然後把 #banner 裡相關的 CSS 設定在這裡：

banner.css

1
2
3
4
5
6
7
8
9
10
11

h1.blogtitle {
display: block;
font-size: 12pt;
padding-top: 10px;
padding-left: 20px;
margin: 0;
}
h1 a {
color: #669;
text-decoration: none;
}

然後在 site.css 裡把它給 import 進來，這樣一來只要更換不同的 site.css 或 banner.css ，就能夠隨心所欲地更換樣式或版型。

而細部的部份呢？像是 #content 裡的 .date 和 .blogbody ？一樣的方式，我們建立一個 content.css ，然後在裡面設定 .date 和 .blogbody 的樣式就可以了。

第五步 CSS 放在哪裡？

在第四步時我們建立了一堆 CSS 檔，那麼應該放在哪裡才能讓網頁讀到它們呢？

其實 @import 指令可以接受外部的 url ，因此在你找到空間並上傳這些 CSS 檔案以後，可以在你的 site.css 上方寫這樣的指令：

1

@import url(http://xxx.xxx.xxx.xxx/xxxx.css);

這樣一來就能讓你的 site.css 引入外部 CSS 樣式了。

補述 (IE 的 Bug)

不知道大家有沒有發現，如果 #links 的內容長於 #content 的內容時，在 IE 上面預覽的話，會發現 #footer 竟然是貼在 #content 的下方，如下圖：

這是 IE 的 Bug ，說實在的，也令人非常討厭。這時上面的 CSS 我們就得做點修正，方法是讓 #content 和 #links 都向左浮動。當然，如果要反過來讓 #links 在 #content 的左方，那麼就把這兩者都向右浮動。這樣一來，在大多數的瀏覽器上都能夠正常顯示了。

補述 (固定寬度置中的版型)

在固定寬度置中的版型裡，我們要額外指定 #content 的寬度，例如：

1
2
3
4
5

#content {
float: left;
padding-right: 200px;
width: 560px; /* 760 - 200 = 560 */
}

為什麼呢？因為我發現多數瀏覽器沒辦法很正確判斷出 #content 內容區應有的寬度，因此就得指定 #content 內容區的寬度。至於技術細節，就請知道的網友告知一下吧。

結語

雖然這裡提供的 CSS 並不能真正用在實務上，但是它俱備了多數 CSS 排版的基礎觀念。因此大家只要了解這些原理以後，相信往後一定能創造更優秀的版型來