小屋創作

日誌2007-09-11 17:08

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

作者：淵

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



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


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


教學開始。



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

51

LINE 分享

相關創作

[巴哈]巴哈姆特聖誕節佈景(圖)

《星辰戰將》不刪檔封測 釋出相關遊戲介紹

【心得】28 週年站聚 巴哈市集【墮天作戰研究部】

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】