整體CSS語法簡單教學

文字撰寫、圖片製作：KAEDE–嵐(wsp86145)

【部分資料參考：如語娃娃(indream228)、異(u4)、兔(sindsiona)】

--

整體CSS語法簡單教學（Flash網路版）

--
因CSS修改區域過多，以下為目次簡圖，請善用瀏覽器搜尋功能搜尋（Ctrl＋F）方便查看：

◎圖層
　└【注意事項】
◎主圖（上）相關設定
◎主選單按鈕設定
　├《橫式選單》
　├《直式選單》
　└《次選單框線》
◎主圖（下）相關設定
◎勇造相關修改
◎資料區框架相關設定
◎背景設定（div.left）
◎背景設定（body）
◎標題設定、文中設定
　├《標題設定》
　└《文中設定》
◎標底設定（框架結束部分）
◎整體文字、部落格文字設定
　├《整體文字設定》
　└《部落格文字設定》
◎右短標題、人氣曲線圖設定
　├《右短標題設定》
　└《人氣曲線圖設定》
◎右短標題內容、項目符號設定
　├《右短標題內容設定》
　└《項目符號設定》
◎按鈕設定
◎背景設定(div.footer)
◎部落格設定
　├《部落格標題設定》
　├《留言區設定》
　└《頁數按鈕設定》
◎捲軸設定

--

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎圖層

在講解小屋製作之CSS之前，先了解目前小屋的圖層架構：

■ 若在下本篇不清楚，亦可參考［如語娃娃(indream228)］之［【小屋】CSS自訂版面：進階─修改中間背景篇］此篇文章。

▼圖一

　　巴哈小屋架構共分有「div.main」、「div.left」、「div.footer」、「div.right」、「div.container」等等，總共五個圖層。另外，除了上述五種圖層以外尚有基底圖層，也就是「Body」。
　　目前大家最常看見的小屋佈置，就是把巴哈原來預設的小屋圖片改為自己上傳網頁空間的版面元件圖片。然而覆蓋或取代原來預設的小屋圖片之後，自己想要的小屋圖片要放在哪些圖層？據個人所悉，最常使用到的圖層是「div.left」、「div.footer」和「Body」這三者。
　　或許不少人會想瞭解到底要怎麼才能掀屋頂而達到整套的小屋佈置，在此還是一樣不會提供教學，為避免不熟悉CSS操作而造成版面或系統破壞之前提，敬請有心要學的另尋高手私下教導。
　　除了基本的圖層以外，亦須知道其他地方CSS代表修正哪裡，可以在巴哈設定的地方查詢：http://home.gamer.com.tw/homeSetIntro.php。

--

【注意事項】
　●要CSS修改之前請務必將CSS做備份，以免失敗不得恢復。
　●以下教學語法為漸進式修改CSS，亦可單獨修改部分CSS。
　●。。。　。。。←此分隔線之中CSS語法為「原始語法」，【說明】才會有修改相關設定。
　●‧‧‧　‧‧‧←此分隔線之中CSS語法才是「加入語法」。
　●搜尋語法時，請注意可能會多一個半形空白鍵就造成搜尋不到。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主圖（上）相關設定

▼圖二

　　目前所要調整之主圖（上）的地方是圖二裡面綠框圈選處。我們要將它加高並且讓原預設的圖片消失。
　　請用搜尋功能搜尋「.banner{」。

這是11週年慶巴哈小屋預設原始碼：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*----------小屋上方主圖---------*/
.banner{
background:url(http://pic.bahamut.com.tw/home/theme/750b.gif) repeat;
height:120px;
padding-left:25px;
padding-top:15px;
}
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 若要將圖片不見，有很多種方法，不過避免資料不正確，請將「background」此行語法
　　　設為『background:transparent;』或是『background:none;』，表示這地方沒有圖片。
　　△「transparent」表示物為透明；「none」表示沒有存在。
　(2) 倘若要把原來的預設圖改為自己喜愛的圖片，請在「background」此行語法做設定：
　　　『background:url(圖片連結) repeat;』。
　　△「repeat」表示框架的高度大於圖片大小，圖片會自動反覆填滿；若不重複圖片則設定為『no-repeat』。
　(3) 如果想要把它加高跟圖片一樣高度的話，在「height」的地方中做設定。
　　　如圖片高度是250pixels：『height:250px;』。
　(4) 暱稱帳號、小屋碎碎唸、稱號勳章三列文字之設定：
　　　「padding-left」表示自左基準線向右距離為多少pixels（數字愈大愈偏右）；
　　　「padding-top」表示自上基準線向下距離為多少pixels（數字愈大愈偏下）。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主選單按鈕設定

▼圖三–1

　　目前所要調整的地方是圖三裡面紅框圈選處。（不過例圖是11週年的小屋）
　　請用搜尋功能搜尋「.menu{」。

--
《橫式選單》
這是巴哈小屋預設原始碼：（非巴哈11週年小屋）
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*---------------------------主選單---------------------------*/
.menu{
background:url(http://pic.bahamut.com.tw/home/menubar.gif) no-repeat;
height:35px;
}/*選單背景圖*/
/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color: #0055CB;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#7C7C7C;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#7C7C7C;
height:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color:#0055CB; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 可在「.menuout a:hover {」的上方標註「/*----移入所在選單狀態*/----」。
　(2) 如不想要主選單之橫向圓弧框底圖，將「.menu{」之「background」設定為
　　　『background:transparent;』或是『background:none;』。
　(3) 更換按鈕圖方式一樣更改「background」之「url:(http://);」括號內的圖片連結即可。
　(4) 「color」代表連結文字顏色，如黑色則設定為：『color:#000000;』。

▼參考結果

--
《直式選單》
■ 若在下本篇不清楚，亦可參考［異(u4)］之［【CSS】直立式選單寫法］此篇文章。
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*---------------------------主選單---------------------------*/
.menu{
background:transparent;
border:none;
position:relative;
top:-53px;
left:-300px;
width:150px;
height:20px;
}/*選單背景圖*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 「top」代表選單自上基準線向下距離為多少pixels（數字愈大愈偏下）；
　　　「left」代表選單自左基準線向右距離為多少pixels（數字愈大愈偏右）；
　　　「width」表示選單的表格寬度為多少pixels（數字愈大愈分開）。
　(2) 若要調整選單的上下文字距離，請在主選單裡分別在「.menuIN{」、「.menuIN a:link,.menuIN a:visited{」、「.menuout {」、「.menuout a:link,.menuout a:visited {」及「.menuout a:hover {」當中找到「line-height」做設定。
　　　如預設的『line-height:35px;』，數字愈小上下文字距離愈擠。
　(3) 若欲在選單做框線，可加入：「border-left:1px solid #顏色色碼;」、
　　　「border-right:1px solid #顏色色碼;」、「border-top:1px solid #顏色色碼;」、
　　　「border-bottom:1px solid #顏色色碼;」。
　　△「left」表左邊；「right」表右邊；「top」表上方；「bottom」表下方；
　　　「solid」代表實線，亦可更改為虛線『dashed』。

▼參考結果

--
《次選單框線》

▼圖三–2

　　如上圖，假若是巴哈預設的小屋佈景，會有藍灰色相漸的兩條橫線，要怎麼把它改掉呢？
　　請用搜尋功能搜尋「.menubarA1{」。

這是巴哈最原始佈景小屋語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*----無次選單狀態----*/
.menubarA1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
}/*次選單與主選單連接部分*/

.menubarA2{
background:#EBEBEB;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單結束部分*/

/*----有次選單狀態----*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單與主選單連接部分*/

.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}/*放次選單按鈕的背景色*/

.menubarB2{
background:#EBEBEB;
}/*次選單結束部分*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　　(1) 請將以上部份所有「background」改為『background:transparent;』。
　　(2) 請將以上部份所有「border」改為『border:none;』或者此行都刪除。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主圖（下）相關設定

▼圖四

　　目前所要調整之主圖（下）的地方是圖二裡面藍框圈選處。可將它原預設的圖片以及灰外框都消失。
　　請用搜尋功能搜尋「.cover_pic{」。

這是11週年慶巴哈小屋預設原始碼：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.cover_pic{
background:url(http://pic.bahamut.com.tw/home/theme/610b.gif) repeat;
}/*COVER圖*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 將圖片消失一樣的方法：「background」設定為『background:none;』。
　(2) 將灰色外框蒸發的方法：鍵入『height:0px;』此行語法即可。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎勇造相關修改

　　這應該不需要我做例圖吧？但這地方建議不要去隱藏會比較好。
　　請用搜尋功能搜尋「.apprise_bg{」（評價區底色分類）或任一處加入以下語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.infom_bk img{display:none;}
.infom_bk A{display:none;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「.infom_bk img{display:none;}」表示將勇者造型圖片、GP；BP圖、線狀圖隱藏。
　(2) 「.infom_bk A{display:none;} 」表示將前往勇造相本、能力及屬性說明的連結按鈕隱藏。
　(3) 若為任一處加入語法時，敬請善用『/*註解內容*/』的方式標註以免忘記。
　(4) 因為涉及GP；BP圖、線狀圖被隱藏（剩單線），故設定語法時請三思。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎資料區框架相關設定

▼圖五

　　請用搜尋功能搜尋「.infom_bk{」。

這是11週年慶巴哈小屋預設原始碼：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*小屋首頁－勇者資料區背景色*/
.infom_bk{
border-left:1px solid #3D3836;
border-right:1px solid #3D3836;
padding-top:12px;
padding-bottom:10px;
background:#ffffff;
}
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 「border-left」、「border-right」表示左框線及右框線，若不需框線可此行刪除。
　(2) 「padding-top」、「padding-bottom」文字內容與上下部份相距多少pixels。
　(3) 倘若不要白底當背景，可更改顏色或將「background」設定成『background:none;』即為透明無底。

　　現在將框線、白底取消後，會變得非常不好看，我們來一一講解：

▼參考結果(一)

【說明】
　(1) 框線：
　　　⊙搜尋「.box1{」。
　　　⊙將「.box1{」、「.box_title{」、「.box_list1{」、「.box_list2{」之「border」、「background」及「background-color」皆不設定。（刪除或設定為none）
　(2) 數值：
　　　⊙搜尋「.ability{」。
　　　⊙「background-color」設定為『background:none;』即透明無底。
　　　⊙以下是11週年慶巴哈小屋預設原始碼：（不需框線即設定none或刪除）
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
/*--勇者各素質區*/
.ability {
background-color:#FFF;
BORDER-RIGHT:#969696 2px solid;　　←右邊框線設定
BORDER-TOP:#bfbfbf 1px solid; 　　←上方框線設定
BORDER-LEFT:#bfbfbf 1px solid; 　　←左邊線設定
BORDER-BOTTOM:#969696 2px solid; 　　←下方線設定
PADDING-RIGHT:4px; 　　←文字距右多少pixels
PADDING-LEFT:4px; 　　←文字距左多少pixels
PADDING-BOTTOM:1px; 　　←文字距下多少pixels
PADDING-TOP:1px; 　　←文字距上多少pixels
LINE-HEIGHT:14px; 　　←行高多少pixels
HEIGHT:0pt; 　　←高度多少pt
TEXT-ALIGN:center; 　　←文字置中對齊
TEXT-DECORATION:none; 　　←文字字型樣式
}
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
　　　⊙若要新增或更改GP、BP圖，請搜尋「.ability_pad{」。
　　　⊙這地方分有兩種狀況分為不同作法：
　　　　【情況一】已設定『.infom_bk img{display:none;}』將勇造等圖都隱藏時，
　　　　　　　　　請直接在「.ability_pad{」加入『background:url(圖片連結);』。
　　　　【情況二】未設定『.infom_bk img{display:none;}』時，
　　　　　　　　　請在「.ability_pad img{」加入『height:0px;』此行語法，
　　　　　　　　　再加上『background:url(圖片連結);』換上自己做好的GP、BP圖片。
　　　　　　　　　（GP、BP圖片維度約250╳25）
　(3) 好感度圖：
　　　⊙搜尋「.apprise_bg{」。
　　　⊙圖片設定即『background-image:url(圖片連結);』（圖片維度175╳105）
　(4) 標底：
　　　⊙搜尋「.category_footer{」。
　　　⊙取消標底『background:none;』。
　　　⊙取消標底的高度『height:0px;』。
　　　※注意：若此部份取消標底，則個人相關資訊、部落閣最新文章、勇者小屋聯播等其它項目之標底皆會被取消。

▼參考結果(二)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定（div.left）

▼圖六–1

▼圖六–2

　　圖六–1要怎變圖六–2呢？請利用搜尋功能找「div.left{」，或加入以下語法。
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
div.left{
background:url(圖片連結)no-repeat;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「no-repeat」表示圖片不會重複。
　(2) 圖片維度約774╳577。
【注意】
　設定此圖層插入自己的圖片當中，若加入圖片時會有灰色圖塊遮住請注意，
　務必要將其灰色圖塊的圖層給隱藏才會顯現自己插入的圖片，參考以下語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
div.left{background:url(圖片連結)no-repeat;}　　←就是上面介紹的語法
div.leftout1{background:none;}
div.leftout2{background:none;margin:0;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「div.leftout1{」與「div.leftout2{」是造成灰色圖塊的原因之一，
　　　可在備份現有CSS語法後測試看看。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定（body）

▼圖七（left圖層在body圖層的上方）

　　如上圖，加上背景圖讓小屋更好看，加上以下語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
body{
background:url(圖片連結) repeat-y;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「repeat-y」表示圖片會重複顯示。
　(2) 如背景圖片想要做成浮水印（意思是滾動捲軸時背景圖不會隨之變動）時，
　　　請加入『background-attachment:fixed;』此行語法，表示背景為浮水印。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎標題設定、文中設定

▼圖八

--
《標題設定》
　　請用搜尋功能搜尋「.category_title{」。

巴哈小屋預設語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.category_title{
background:url(http://pic.bahamut.com.tw/home/category_title.gif) no-repeat;
height:40px;
}/*主標題一使用*/

.category_title2{
background:url(http://pic.bahamut.com.tw/home/category_title2.gif) no-repeat;
height:40px;
}/*主標題二以下使用*/

.category_word{
color:#117E96;
font-size:15px;
font-weight:bold;
padding-left:85px;
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 建議要改標題的話，「主標題一」和「主標題二以下使用」兩個請一起改。
　　　更換圖片請將「url()」裡括號的圖片連結改自己的圖（圖片寬度750pixels）
　(2) 「height」表示圖片的高度（自訂）。
　(3) 「font-size」表示標題文字大小；「font-weight:bold;」代表文字為粗體。
　(4) 「padding-left」表示文字距左多少pixels，若不要讓文字靠左固定距離，
　　　亦可將標題文字設定為置中，則鍵入『text-align:center;』。
　　　※若設定文字置中後，可將「padding」等三行設定刪除。
　(5) 設定字元間距，如想要文字間距為5：『letter-spacing:5px;』。

--
《文中設定》
　　首先，我們先將左邊的巴哈姆特龍圖像更換或刪除。

▼巴哈姆特龍圖樣

　　請用搜尋功能搜尋「.article_pic{」。

巴哈小屋預設語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}/*文章或畫作的縮圖邊框*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 上述「border」表示圖像的邊框設定，刪除或設定『none』則無邊框。
　(2) 若再加入以下語法，則該圖像圖片就消失匿跡了：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
height:0px;
width:0px;
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧

■ 若想要讓巴哈姆特龍圖增加特效，可參考［異(u4)］之［【CSS】IE濾鏡特效與火狐半透明語法］此篇文章。

▼參考結果(一)

　　再來，修改部落格文章預告的版面調整和框線。

【說明】
　(1) 搜尋「.articlebox{」。
　(2) 以下是巴哈預設小屋語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.articlebox{
border:1px solid #7DC8D0;
background-color:#FFFFF4;
padding:5px;
width:100%;
}/*個人部落閣最新文章及GP值底色*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
　(3) 請將「width:100%;」的「100%」更改為「px」，即設定寬度為多少pixels。
　(4) 在框內插入圖片：將「background」改為『background:url(圖片連結);』。
　　　△圖片維度可自訂：「width」：寬度、「height」：高度。
　(5) 文字對齊方式：建議設定為『text-align:center;』，若需要設定「padding」，
　　　則建議不要將距離拉太長，否則會變形。因為此圖片與部落格GP底圖相對應。

▼參考結果(二)

　(6) 如上圖指示圖，GP欄位的底圖是和部落格文章預告區底圖相通的，不過，
　　　在GP欄位底圖的範圍內可自由選擇要顯示右邊、顯示左邊還是顯示中間：
　　　加入『background-position:right;』（right：右邊、left：左邊、center：中間）。

▼參考結果(三)

　　最後，更改框架中間的框線。請搜尋「.category_bk{」。

這是敝人小屋的語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.category_bk{
background-color:#181645;　　←內文的背景色
border-left:1px solid #D0CFDE; 　　←欄位左邊線條
border-right:1px solid #D0CFDE; 　　←欄位右邊線條
border-top:1px solid #D0CFDE; 　　←欄位上方線條
border-bottom:1px solid #D0CFDE; 　　←欄位下方線條
padding:12px; 　　←框線與內容距離
}/*內文的背景色*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。

▼參考結果(四)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎標底設定（框架結束部分）
　　請用搜尋功能搜尋「.category_footer{」。

巴哈小屋預設語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.category_footer{
background:url(http://pic.bahamut.com.tw/home/bottom.gif);
height:25px;
}/*框架結束部分*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖（圖片寬度750pixels）
　(2) 「height」代表高度，故圖片的高度可自訂。
　(3) 取消標底（框架結束部分）在之前的資料區設定已有講解過，在此再講一次：
　　　取消標底『background:none;』、取消標底的高度『height:0px;』。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎整體文字、部落格文字設定
--
《整體文字設定》
　　請利用搜尋功能找尋「TD{」。

巴哈預設小屋語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
TD{
color:#464646;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}

A:link{
color:#464646;
text-decoration:none;
}/*還未造訪連結狀態*/

A:visited{
color:#464646;
text-decoration:none;
}/*造訪過後連結狀態*/

A:hover{
color:#0064AF;
text-decoration:underline;
}/*滑鼠移入連結狀態*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 「TD{」表示小屋整個的所有文字設定（除已有設定的文字區段外）。
　(2) 「color」：文字顏色、「font-size」：文字大小、「font-family」：文字字體。
　(3) 「text-decoration」表示文字字型樣式設定，『underline』是底線的意思。

--
《部落格文字設定》
　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。

‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.home_t3{font-family:"Arial ";font-size:11pt;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「font-family」：文字字體、「font-size」：文字大小。
　※注意，若設定字體為特殊字體，瀏覽時對方的電腦未安裝你的特殊字體時，會顯示不出來，
　　進而自動改變為預設字體，即「新細明體」。

■ 若需要瞭解更多，可參考［異(u4)］之［【CSS】巴哈小屋字體使用全破解與字體介紹］此篇文章。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎右短標題、人氣曲線圖設定

▼圖九

--
《右短標題設定》
　　搜尋或加入「.post_title{」。（因預設巴哈小屋好像沒有）
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.post_title {
height:40px;
background:url(圖片連結) no-repeat;
padding-left:50px;
color:#191747;
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「height」表示高度，故圖片高度可自訂。
　(2) 更換圖片請將「url()」裡括號的圖片連結改自己的圖（圖片寬度約172 pixels）
　(3) 「padding-left」表示文字對齊，自左基準線往右距離多少pixels。
　(4) 「color」代表標題文字顏色。

--
《人氣曲線圖設定》
　　讓人氣曲線圖消失，任一處自己曉得的地方加入以下語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
#Flash_curve{
display:none;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧

■ 若想要將右邊內容做特效，可參考［兔(sindsiona)］之［【css教學】右邊背景圖PII 教學，及透明語法運用］此篇文章。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎右短標題內容、項目符號設定

▼圖十

--
《右短標題內容設定》
　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。

這是敝人小屋的某段語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.home_c1{color:#191747;}
.home_c1 a:link, .home_c1 a:visited{color:#363299;}
.home_c1 a:hover{color:#6E6C9C;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「.home_c1」：右邊短標題的內容文字顏色
　(2) 「.home_c1 a:link, .home_c1 a:visited」：右邊短標題的連結顏色（滑鼠未移入）
　(3) 「.home_c1 a:hover」：右邊短標題的連結顏色（滑鼠移入後）
　(4) 更改顏色請直接在「color」的後方將色碼填上，如紅色『color:#FF0000;』。

　　現在一般文字顏色、連結文字顏色都講了，那「by 帳號」後面的日期顏色呢？
　　請用搜尋功能搜尋「.extend3{」。

這是敝人小屋的某段語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.extend3{
color:#9595B1;
}/*By之後的日期顏色*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 更改顏色請直接在「color」的後方將色碼填上。

--
《項目符號設定》
　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。

這是敝人小屋的語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.post_list{
Background:url(圖片連結) no-repeat;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖（圖片維度約15╳15pixels）

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎按鈕設定

▼圖十一

■ 若在下本篇不清楚，亦可參考［異(u4)］之［【CSS】巴哈預設按鈕更動法］此篇文章。

　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。

‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.button,.button2,.button3,.button4,.button_h1,.button_h2{
background-image:url(圖片連結);
background-repeat:no-repeat;
height:20px;
border-top: 1px solid #FFF;
border-bottom:1px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#000;}

.button:hover,.button2:hover,.button3:hover,.button4:hover{
background-image:url(圖片連結);
background-repeat:no-repeat;
height:20px;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#000;}

.button_c1 img{display:none;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖。
　(2) 「no-repeat」表示圖片不會反覆填滿；若要重複圖片則設定為『repeat-y』。
　(3) 「height」：表示按鈕的高度。
　(4) 「border」：「left」表左邊；「right」表右邊；「top」表上方；「bottom」表下方；
　　　「solid」代表實線，亦可更改為虛線『dashed』。
　(5) 「color」：某些按鈕的文字顏色。
　(6) 「.button_c1 img{display:none;} 」：將『＋收藏』的＋圖案取消。

　　另外，怎麼修掉「訂閱我的小屋」這個按鈕？請加入以下語法：
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.home_order_button{visibility:hidden;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定(div.footer)

▼圖十二

　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
div.footer{
background:none;　　←將原本的白底取消
border:none;}　　←將原本的框線取消
background-image:url(圖片連結);　　←加上自己的圖片（圖片維度約995╳70pixels）
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎部落格設定

▼圖十三

--
《部落格標題設定》

巴哈預設小屋語法：
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
.article_t1{
color:#FF6600;
font-weight:bold;
}

.article_t1 a:link, .article_t1 a:visited{
color:#FF6600;
font-weight:bold;
}/*個人部落閣文章標題顏色*/
。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。　。。。。。
【說明】
　(1) 「.article_t1{」代表文章內「－－相關文章－－」等文字顏色。
　(2) 「color」表文字顏色。
　(3) 「font-weight」代表文字樣式為粗體字型。
　(4) 「.article_t1 a:link, .article_t1 a:visited{」代表部落格標題；
　　　可加入『background:url() no-repeat;』，則括號內可貼上項目符號之圖片連結。
　(5) 文章摘要等文字內容顏色，請搜尋「.extend{」並可在『color』調整文字顏色。
　(6) 註解文字與「by 帳號」後面的日期顏色相同。

--
《留言區設定》
　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
textarea{
background-image:url(圖片連結);
width:500px;
height:210px;
background-position:left;
}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 加入圖片請將「url()」裡括號的圖片連結改自己的圖。
　(2) 圖片維度可自由設定，即『width』：寬度、『height』：高度。
　(3) 此與部落格GP欄位相同，可自由選擇要顯示右邊、顯示左邊還是顯示中間，如：
　　　『background-position:left;』表示顯示左邊（right：右邊、center：中間）。

--
《頁數按鈕設定》
　　在小屋任一處加入以下語法（建議加在自己找得到或要標註清楚）。
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
.tsmal{
color:#fff;}

.p_nolink{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.p_nextprev{
Background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.pag{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.pag:hover{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「.tsmal{」表示「第幾頁，共幾頁 (共幾項)」之文字設定。
　(2) 「.p_nolink{」表示非連結頁數按鈕設定。
　(3) 「.p_nextprev{」表示所在的頁數按鈕設定。
　(4) 「.pag{」表示非在的頁數按鈕設定。
　(5) 「.pag:hover{」表示滑鼠移入按鈕設定。
　(6) 「background」：更換按鈕圖片請將「url()」裡括號的連結改為自己的圖。
　(7) 「color」：按鈕文字顏色。
　(8) 「border」：按鈕框線設定。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎捲軸設定

▼圖十三

　　以下語法和BODY圖層編排在一起。
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
body{
scrollbar-3dlight-color:#;
scrollbar-arrow-color:#;
scrollbar-darkshadow-color:#;
scrollbar-face-color:#;
scrollbar-highlight-color:#;
scrollbar-shadow-color:#;
scrollbar-track-color:#;}
‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧　‧‧‧‧‧
【說明】
　(1) 「scrollbar-3dlight-color」：左立體邊顏色。
　(2) 「scrollbar-arrow-color」：箭頭顏色。
　(3) 「scrollbar-darkshadow-color」：右立體邊顏色。
　(4) 「scrollbar-face-color」：軸面顏色。
　(5) 「scrollbar-highlight-color」：軸面左角邊顏色。
　(6) 「scrollbar-shadow-color」：軸面右角邊顏色。
　(7) 「scrollbar-track-color」：軸軌顏色。
　(8) 倘若自己設定太麻煩，可至此網頁：http://www.moninet.com.tw/easypage/css.php
　　　設定，不過請注意該網頁還多一個「整體顏色　scrollbar-base-color」。這可不用設定，
　　　因為有點類似「軸面顏色　scrollbar-face-color」。

--

以上，歡迎指證錯誤￣︶￣∕

（累癱了）