【小屋】CSS自訂版面：進階─修改中間背景篇

本文引用自此

<本文發表於2007/09/10 最後修改於2007/09/10 13:30 BY如語娃娃>

前言：
　　‧進階篇都是必須外加語法的，所以，請不用在自訂版面的語法中瞎找。
　　‧說真的，本篇很多大大都已釋出教學，這邊如語只是把語法整個說一次罷了──（笑）
　　‧注意：頁面設定上有些地方是不斷覆蓋的。
　　　　　　如果你發現你可以不需要哪一部分的設定，就不要忙著順便增加內容，
　　　　　　因為只要頁面上設定的圖檔越多，畫面的流暢性會越受到影響。
　　‧相關ＣＳＳ的教學亦可參考這幾位大大小屋的教學──
　　　gn6824 (藏鏡咪咪)、:+:Aery:+: - 啻異(u4)、夏日薔薇(janeyang)、兔(sindsiona)、米洛 (u9010066)

本篇說明方向：看不到圖時使用
　　這是簡圖─

　　其中，旁邊的小框框是將語法中各個設定所影響的範圍獨立出來，中間的則是合併後的樣式。

　　合併就代表重疊…多數的顏色都會疊在「div.container」
　　假設你在「div.container」有設定背景色，那麼不論你其他地方怎麼設定透明，都會是「div.container」的背景。

　　有些人會問那灰色框框旁邊那個白白的設定在哪裡，其實它是網頁的基本背景，是在Body中設定的。如果想設定網頁的背景，可以參考第一篇進階教學。

語法簡略化：原語法請參考本篇最上「引用網址」中的教學
/*-----小屋區表單背景設定----*/
div.container {/*上方之下整個頁面區設定*/
background-color: transparent;
}
div.mainOut {
background-color: transparent;
}
div.main {
background-color: transparent;
}
div.left {/*左邊整體設定*/
background-color: transparent;
}
div.leftOut1 {
background-color: transparent;
}
div.leftOut2 {
background-color: transparent;
}
div.right {/*右邊整體設定*/
background-color: transparent;
}
div.rightTop {/*右上廣告區設定*/
background-color: transparent;
}
div.rightDown {/*右下選單資料區設定*/
background-color: transparent;
}
div.footer {/*下面著作權處*/
background-color: transparent;
border-top: transparent;}
/*這是著作權聲明欄位上方那條線，如果不要有線，這邊就要補充設定border無。*/

------------------------
每一樣中皆可以設定背景，只要加入背景語法即可。
每一樣主要的都可以設定框線與邊界據哩，不過小心你家版面失衡。
因為上述幾乎層層相疊，看簡圖即可知道，所以，當你在設定背景時要三思。

如果，對於右邊個人資料區設定有興趣的人，可以參考啻異大或是兔大的教學。