最近有很多朋友在問有關css的問題，而主要的問題都落在三欄式版面的構成上面，這邊小弟將分兩期介紹一下兩種不同的三欄式版面的css作法，希望可以提供一些方向。
css到底是什麼?
簡單來說，css就有點像是一個參考表，裡面指定了各種不同稱之為"標籤"的屬性設定(像是字型大小，顏色等等)，在做網頁設計時便可以套用這些屬性標籤，以節省時間。當然，css除了可以節省時間外，css也提供了很多方便的語法，且自由度很高，稍加創意便可以很輕易的做出html語法不易達成的效果。
三欄式版面與css
這篇文章將著重在css在三欄式版面的運用，並以最常被使用的三欄式版型加上banner與下footer為例 (見圖一) 。這邊介紹兩種不同的做法，完成後的效果也有些差異，端看設計者的喜好決定。
如上圖所示，基本的三欄式版面簡單分為五個區塊：置頂、置尾、左欄、右欄及中欄。
作法一：使用絕對位置，將左右欄緊貼在視窗兩側 (見圖一)
- 無論觀賞者螢幕解析度或視窗寬度為何，左右兩欄的寬度將保持一定。(見圖二)
- 若於文中貼圖，若中間欄的寬度小於貼圖寬度時，則會有吃圖現象產生。
- 以下五個css標籤設定為基本的框架，當然你可以將之繼續發展，設定字體、顏色、行距等等。
- 置頂部分：
#banner {
margin-right:0px;
設定與右邊緣距離
margin-left:0px;
設定與左邊緣距離
background:#dddddd;
背景顏色
height:80px;
設定高度
}
- 置底部分：
#footer {
margin-right:0px;
設定與右邊緣距離
margin-left:0px;
設定與左邊緣距離
background:#dddddd;
背景顏色
height:80px;
設定高度
}
- 左欄部分：
#left {
position: absolute;
宣告使用絕對位置
padding:10px;
設定內容與區塊邊緣距離
left:0px;
設定與左邊緣距離
top:80px;
設定與上邊緣距離，因banner部分高度為80px，因此設80px
bottom:80px;
設定與下邊緣距離，因footer部分高度為80px，因此設80px
background:#eeeeee;
設定背景色
width:200px;
設定左欄寬度
}
- 右欄部分：
#right {
position: absolute;
宣告使用絕對位置
padding:10px;
設定內容與區塊邊緣距離
right:0px;
設定與右邊緣距離
top:80px;
設定與上邊緣距離，因banner部分高度為80px，因此設80px
bottom:80px;
設定與下邊緣距離，因footer部分高度為80px，因此設80px
background:#eeeeee;
設定背景色
width:200px;
設定右欄寬度
}
- 中欄部分：
#content {
background:#FFF;
設定背景顏色
padding:10px;
設定內容與區塊邊緣距離
margin-top:80px;
設定與上邊緣距離
margin-right:200px;
設定與右邊緣距離
margin-left:200px;
設定與左邊緣距離
margin-bottom:20px;
設定與下邊緣距離
}
- 在編寫完上述css部分後，便可繼續編寫html模版，範例如下：
<html>
<head>
<title></title>
</head>
<body>
<div id="banner">置頂區塊內容</div>
<div id="left">左欄內容</div>
<div id="center">中欄內容</div>
<div id="right">右欄內容</div>
<div id="footer">置底區塊內容</div>
</body>
</html>
* 註：
- 網路上有非常多的css教學參考文件，歡迎朋友前往取經(google一下就有一堆了)，本文只是希望提供方向，讓初學的朋友可以更進一步了解css語法是如何設定的，實際使用時尚需更多的細部設定，內容涵蓋不週之處還請見諒。
- 若想要在版面中實現如範例中的框線，可以在置頂部分加下框線、置底部分加上框線、中欄部分加左右框線即可，使用語法範例如下：
border-(top/left/bottom/right):1px #999999 (solid/dashed/dotted) ;解釋：
border-(上/左/下/右):寬度設定 顏色設定 樣式設定(實體線/虛線/點線);範例：
border-left:2px #990000 solid;
- 背景色部份可以使用圖檔取代純色設定，使用語法如下：
background-image: url(http:/path.to/image.gif) ;
如欲背景不重複，可加上no-repeat top left (or right)
如欲背景只縱向重複，可加上repeat-y top left (or right)
完成範例如下：
background-image: url(http:/path.to/image.gif) no-repeat top left ;
未完待續 ...
-->
|
你是說Gmail嗎？ 2004-08-31
|
| 淺談CSS於三欄式結構之應用 [上] |
|
八月份站方公告 2004-08-25
|
Licensed under
請問你一下
如果我是要將2個邊欄放在一起
不是要一左一右的排法
那樣子語法要怎麼寫呢
看样子，票还没有补上哦！！！
哈哈！..
又见面了..
你好
我也有weini 一樣的問題
照著你給他的答覆
我搞定了border跟cellpadding
但cellspacing改成TD中的margin怎麼弄都沒有效果
不知道是不是還有其他的方法呢？
以下是我寫的程式:
.propertiesTable
{ border-width: 0;
background-color:#C9C393;
}
.propertiesTable TD
{
font-family: Verdana, Arial;
color: #6A6A6A;
font-weight: normal;
font-size: 8pt;
background-color: #FDF8CE;
text-align: left;
padding: 3;
margin: 10;
}
Dear weini :
假設 table 用上 "tmp" 的class name :
table.tmp {
border-style:groove;
border-width:0px; /* 等同 border="0" */
}
table.tmp td,
table.tmp th {
padding:0px; /* 等同 cellpadding="0" */
margin:0px; /* 等同 cellspacing="0" */
}
有錯請指證
請問誰知道css怎麼控制table裡的border="0" cellpadding="0" cellspacing="0"這各，不要設在table裡，看到的樣子會是這樣用class設定border="0" cellpadding="0" cellspacing="0"救救我~
AUTHOR: asdasd
EMAIL: aas@sdsd.com
IP: 210.66.159.45
URL:
DATE: 01/11/2006 03:19:13 AM
Dear summer.Q :
呵呵..真是不好意思..
本以為已經沒人看這文章了..
看來跳的票還是要找時間補一下了..
Dear 柏直瓜子 :
加上這個代表著什麽樣的操作，請給與詳細説明。
我在等待方法2的出爐，確切的說我是想知道怎麽用CSS控制表格大小，即使圖片比表格寬度大也不會將表格撐變形。
以上範例，若在#banner和#footer內加上 clear:both; 會更好
對作網頁什麼都不懂的人來說，這篇真的是很棒ㄟ
今天又學到了ㄧ點東西囉！Ccccc~
>>2 / Dear ㄚ凱 :
真是不好意思，謝謝提醒，現已修正。
>>3 / Dear 艾德 :
多謝幫忙回應及補充。
>>4 / Dear Eva :
依照本文的做法，已經可以製作出圖裡的架構，所謂更多的"細部設定"意思是指個人喜好不同，版面當然也會有些不一樣，且這裡所列述的只是有關三欄式架構的部分，若真要使用尚需配合其他標籤以臻完整。
"實際使用時尚需更多的細部設定"
唉!!就是這個讓人頭痛
>>2 / Dear ㄚ凱 :
把置底部分：的#banner 改成 #footer
應該就 ok
至於裡面的 margin 寬度 還有bgcolor 都可以自己改 ^_^
報告.內容有誤...
置底部分：
似乎變成跟 banner 一樣?
真的很實用, 節省了很多時間在修改面板, 尤其是當網頁很多的時候, 想到之前學網頁, 那時候只有筆記本能用 >_