小屋系統預設圖片更換教學 - PART 7(背景完全攻略)

作者：淵│2007-09-11 17:08:36│巴幣：0│人氣：9341

好像只剩下背景還沒講過了@@....

今天來教大家換背景!!!

照慣例，怕出狀況者請記得先備分哦~

教學開始。

1.請打開

2.因為有些部分站方後來鎖掉了....所以以下就比較明顯的部分來教大家更換。
　請看這張圖（一）。

　我就幾個要教的部分分別畫上了顏色，等一下會說明。

3.接下來看這段CSS的內容，這部分原來是沒有的，後面可以讓大家複製回家用。

　圖片裡面的顏色說明和上一張圖的顏色類別是相同的，大家可以對照著看。

綠色：這一段其實我不建議設底色...也就是background-color，
　　　這裡要變動的部分只有border那一行而已，
　　　也就是圖（一）的綠色線部份，這裡你可以像下面這樣設定，就會和圖(一)相同，
　　　只有旁邊兩條綠色線。
border-top:0px;
border-bottom:0px;
border-right:2px;
border-left:2px;

紅色：這一段呢，我不建議設框線border，因為很醜= =
　　　需要變動的部分只有background-color那一行底色的部分，
　　　當然啦，你也可以把這句拿掉，改成放圖片的語法上去，那塊就會有美美的背景了。
　　　放圖片的語法如下。
background-image: url(http://圖片網址);

橘色：我想這部分應該超～～～～～多人想換的，
　　　個人覺得這裡設框線非常多此一舉....如果你想要，也是可以自己加啦，
　　　因為只會多一條線在橘色這塊的頭上而已，我自己測試是這樣，
　　　有興趣的人自己玩看看。

藍色：這裡不知道為什麼非常莫名其妙，因為沒辦法設底色|||Orz
　　　只能設背景圖片上去，大概是站方也鎖住了。
　　　如果不放背景圖片的話，就只會有預設的一片空白而已。
　　　當然也可以設框線，藍色這塊當中的深藍色框線就是了。

我知道應該會有人問，那圖(一)旁邊那兩條紫色呢？
這個應該很多人會了吧？
那兩條紫色的語法就是
body{background-image: url(http://圖片網址);}
這句建議放在前面比較好。

講了這麼多，給大家複製回家用的語法如下：

/*--------------------其他背景--------------------*/
/*-----左右兩側、綠色線、不建議設底色background-color -----*/
div.mainOut { /整條(細線綠色)/
width: 950px;
margin-right: auto;
margin-left: auto;
text-align: center;
border:green 5px dashed;
}
/*-----右下角那一塊、紅色、不建議設框線border -----*/
div.main {
width: 948px;
margin-right: auto;
margin-left: auto;
background-color:red;
background-image:;
}
/*-----主要的底色、橘色、這裡設框線border只會多一條線在橘色的上面-----*/
div.left {
width: 774px;
margin-top: 1px;
text-align: center;
background-color:orange;
background-image:;
}
/*-----最下面、藍色-----*/
div.footer {
background-color: #000000;
background-image: url(http://houup.myweb.hinet.net/bahakuro/KUBack2.PNG);
border: solid darkblue 2px; /那條深藍色線/

這個我是放在最下方啦，我自己習慣。
反正前提是你自己要知道你自己放了什麼東西哦~~

如果還有什麼想問的，雖然我也不太懂這個，
我還是盡力拿出我的三腳貓功夫替各位解答嚕~~

可是請不要叫我幫你寫....而且還是叫我寫我已經講得很清楚的東西=_=
每個人都當過新手，我也是自己慢慢摸索出來的。

喜歡 42 收藏 132 引用 1 留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=667781
All rights reserved. 版權所有，保留一切權利

相關創作