馬戲團模版大剖析（－）整體架構

整體是俄羅斯娃娃式的一個包一個的巢狀架構。在較外層的地方，主要是設定這一區塊的大小和位置，較裡層的地方，則設定這一區塊的顏色、字體、邊線等等格式。

我們一個個來看，請翻出你的馬戲團式樣表（stylesheet)。

1. body區塊

body {
margin:2px 0px 20px 0px;
/* 四週的留邊，上2點；右0點；下20點；左0點*/
background:#FFF;
/* 底色是純白　*/
}

2. container區塊
#container {
line-height: 140%;
/* 每行文字的高度是字大小的140% */
margin-right: auto;
/* 此區塊的右留邊, 設為自動調整 */
margin-left: auto;
/* 此區塊的左留邊, 設為自動調整 */
text-align: left;
/* 文字靠左排 */
padding: 0px;
/* 區塊內的留邊, 設為0點 */
width: 800px;
/* 寬度設為800點 */
background-color: #FFFFFF;
/* 底色為全白色, 設為#FFF也是相同的效果 */
border: 1px dotted #FFFF99;
/* 邊線設為1點, 點點狀, 顏色為米黃 */
}
註：那條米黃邊線顏色很淡，幾乎看不見，你可能會覺得有點莫名其妙，這條邊線要用來幹嘛。其實呢，它是有道理的--因為我忘了把這行刪掉（XD）。如果你不喜歡這個米黃的邊線，可以自行把它拿掉，這是今天的作業(咳)。

3. banner區塊
這個區塊是招牌哦，很重要，請注意研究清楚。
#banner {
font-family: 'Trebuchet MS', Verdana, sans-serif;
/* 字體的設定，這裡只設定了英文的字體 */
color: #FFFFFF;
/* 字的顏色為全白 */
background-color: #8B0000;
/* 底色是酒紅色 */
text-align: left;
/* 文字靠左排 */
padding: 15px;
/* 區塊內的留邊, 設為15點 */
border-top: 2px solid #000;
/* 上邊線粗2點, 實線, 黑色 */
border-bottom: 2px solid #000;
/* 下邊線粗2點, 實線, 黑色 */
height: 39px;
/* 整個招牌的高度是39點 */
}

註：如果的你的招牌是一個圖檔的話，請注意，要把padding改成0點，上下邊線的設定也拿掉，高度也要和你的圖檔高度一樣，否則會有很奇怪的結果。這在IE上可能不明顯，但若用Firefox看就明顯是歪掉的招牌，甚至會蓋到下面的文章。關於掛招牌的方法，請參閱這篇。

4. left 與right 區塊
#left {
float: left;
/* 這個區塊向左浮動（不懂是什麼意思的話，就不要改它） */
background-color: #F5F5DC;
/* 底色是黃灰色 */
width: 200px;
/* 寬200點 */
overflow: hidden;
/* 要是這個區塊裡的字或圖案寬度超過區塊的寬，那就讓超過的部份看不見 */
}

5. center區塊
#center {
float: left;
/* 這個區塊向左浮動*/
width: 400px;
/* 寬400點 */
overflow: hidden;
/* 要是這個區塊裡的字或圖案寬度超過區塊的寬，那就讓超過的部份看不見 */
}

6. centerfor2col區塊
同center區塊，差別只有寬度為600點。

7. 調整寬度
如果你要調整左右邊欄（left, right）和中間欄(center)的寬度，千萬記得，它們的寬度總和必須要等於container的寬度。

在上面三欄的例子中，左右欄為200點、中間欄為400點，加在一起，剛好等於container的800點。

而二欄的例子中，主文欄（centerfor2col)是600點，右欄是200點，加在一起，真巧，也等於container的800點。

數學很奇妙吧，呵呵。

今天課程到這裡為止，下次我們再分別討論招牌、左右欄和中間欄的細部格式設定。