日誌2007-09-10 14:49

【小屋】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無。*/

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

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

15

23

LINE 分享

相關創作

2024第六屆大專盃電競錦標賽✨NBA2K24✨

《逆水寒手遊》內功的基礎介紹｜各職業推薦內功搭配 #WayDE瑋德

巴哈姆特網路論壇害一位少年走向絕路

留言

• 2007-09-10 14:55°×糖伊×°：
  我說這位姐姐．．
  不是說小屋要暫時打佯＞Ｑ＜
  不乖的話我要把你綁住＞ｗ＜

  2007-09-10 14:59莉薇婭莞夢：我我……
  又被你看到了Ｑ。Ｑ
  
  我很難管住自己的手……（乖乖遞出雙手）

• 2007-09-10 15:24闇光：
  等哪天良心發現了我再放個背景吧。(懶)
  
  話說還不趕快去休息？XD

  2007-09-10 20:22莉薇婭莞夢：話說從看到你發言到現在...
  我一直有想過要去休息...真的！

• 2007-09-10 15:41侯：
  呵呵~
  真的是放不下手邊的工作~
  認真的娃娃~
  

  2007-09-10 20:22莉薇婭莞夢：ORZ 真的不知不覺
  媽咪快要把我拖去掉起來打了ˊˋ"

• 2007-09-10 15:46林鴻鈞：
  (綁走)

  2007-09-11 12:26莉薇婭莞夢：(被綁，笑，掙扎)

• 2007-09-10 15:51)＊ sｈα nｅ漩＊(：
  如語好點了嗎@@"
  
  忽然看到教學出現嚇了一跳XD
  照慣例先推推再來研究囉^^

  2007-09-10 20:23莉薇婭莞夢：(被前面的人綁走)
  
  謝謝推文呀>///<

• 2007-09-10 16:07歪歪：
  如語應該是屬於那種閒不下來型的… QQ"
  只有熱心啦！妳一定積了很多功德！
  在這之前…身體要先顧好啊！ (看別人替妳操心也跟著操心… QQ)

  2007-09-10 20:24莉薇婭莞夢：ORZ...
  我作孽才對.讓那麼多人擔心(淚)

• 2007-09-10 16:09啦啦噗：
  感謝教學＞＂＜！！終於把討厭的白板弄掉了＝ˇ＝！

  2007-09-10 20:24莉薇婭莞夢：不客氣~
  很高興幫上忙呀~

• 2007-09-10 16:18老爹：
  最近有點懶得用小屋 哈@@ 還有要多休息黑~~不然老爹把你綁走 (大笑)

  2007-09-10 20:25莉薇婭莞夢：前面有人已經綁了說@.@
  (三度被綁)

• 2007-09-10 17:25夏多爾‧米菲‧艾因法：
  不推真是對不起我自己 QQ
  如語屋主的剛好點出我想要的 QQ

  2007-09-10 20:25莉薇婭莞夢：真開心幫上忙>///<

• 2007-09-10 17:28Beatrice：
  淺顯易懂，打包冷凍。

  2007-09-10 20:26莉薇婭莞夢：請帶去冰凍吧~

• 2007-09-10 21:02)＊ sｈα nｅ漩＊(：
  前面的快放了如語啊>_<
  這是犯法的呀~
  

  2007-09-11 11:07莉薇婭莞夢：呵呵～（我飄～）

• 2007-09-10 23:26序：
  又看到教學真是開心~而且剛好是我之前最在意的部份XD
  但身體才是最重要的喔~
  要身體健康我們才可以放心的把文章打包帶走:D
  多休息啦^^

  2007-09-11 11:08莉薇婭莞夢：不健康就不能打包一ˇ一…
  
  
  話說我最近真的身體很差啊（囧）

• 2007-09-11 10:28米洛：
  哇!好棒^^
  
  打包走了喔~^^

  2007-09-11 11:08莉薇婭莞夢：歡迎打包～就得回來聊天啊（羞）

• 2007-09-11 16:25貓貓大好：
  好複雜的樣子@@
  帶回家慢慢研究

  2007-09-11 16:42莉薇婭莞夢：慢慢來ＯＲＺ

• 2007-09-11 20:03熊貓怪獸：
  我覺得他很強,又厲害,可是可能又些地★★

  2007-09-11 20:07莉薇婭莞夢：?
  雖然不太懂您的涵義，但謝謝您的推文唷˙ˇ˙

• 2007-09-12 15:12綾奈：
  這個真的很實用!!THX

  2007-09-12 21:40莉薇婭莞夢：不客氣˙ˇ˙//

• 2007-09-12 15:49飄沄：
  
  收藏 收藏
  
  雖然我是電腦白痴
  
  還是要 推~~推~~~~

  2007-09-12 21:40莉薇婭莞夢：謝謝>///<

• 2007-09-16 08:39糖水‧不加糖：
  收藏+1

  2007-09-16 13:38莉薇婭莞夢：歡迎收藏XD~

• 2007-09-16 17:07小飛：
  謝謝提供呀，
  不過不知道為什麼，
  我的小屋要是點入文章裡面看，
  上面就會出現一欄空白呀～＂～　苦惱
  
  目前小屋隨便亂玩中　ＸＸＤＤ
  
  最後還是感謝大大的分享。

  2007-09-16 17:43莉薇婭莞夢：我看過你家了　背景圖片設定好多　瀏覽起來還真有點卡（汗）
  不過我還看不出你說的問題怎麼發生的，所以也沒法回應你的苦惱（淚）
  
  另，建議您把背景圖只留「div.container」的背景設定即可
  其他的「background-image:」改成「background:transparent」
  這樣瀏覽你家的時候會更順暢。

• 2007-10-17 18:12色狼大叔：
  感謝大大的教學還是搞清楚這麼用
• 2007-10-17 23:57りょう〃Ryo：
  呼~多虧有娃娃大的透明化><~
  真的是幫了很多忙XD 感激!!

  2007-10-20 07:26莉薇婭莞夢：很高興能對妳有幫助，
  老實說我已好久沒看教學內容了，
  原本還想補全一些細節的，一直沒空ˊˇˋ

• 2008-01-22 00:21娜依秀：
  不知道為什麼我把圖放在div.left層的時候
  圖片的上方都會有一條白線
  我找不到方法可以把它去掉耶 O_Q
• 2009-03-01 21:27卡爾．Ｊ．山德羅：
  非常感謝你的教學文^_^

• 送出