【小屋】CSS自訂版面：五、小屋封面圖＆勇者基本資訊和能力表篇

前言：＜本文發表於2007/09/13 最後修改於2007/09/13 12:15　如語娃娃＞
　　以下內容可以對照「CSS自訂面板」的語法內容。
　　‧本篇講解方向：小屋封面圖、勇者基本資訊和能力表。
　　‧下一篇說到部落閣的部份時，應該就不會簡單的結束……ＸＤ。
　　　〈我還在想不通為什麼我設計的小屋，驗證欄沒辦法顯示文字色，我家還頗正常的說……(14:04)〉
　　‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼，只是「#」不要忘記加了。例如：#FFFFFF(白色)可換成#b23535(咖啡紅)，簡單取得色碼的方法
　　　1.參考巴哈小屋提供的色盤
　　　2.到日本網站的「原色大辭典(連結)」
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。

本篇講解方向


/*--------------------------小屋封面圖------------------------------*/
.cover_pic{
background:url(http://pic.bahamut.com.tw/HOME/92/home_indream228.JPG) repeat;
}/*COVER圖*/

　　最近有朋友問我怎麼把看版圖的框給隱藏，看了他舉得巴友─櫻澤楓(joe0145)─的小屋，困惑我好一會的問題才豁然開朗〈困擾的時候還沒有看他舉的小屋，所以想很久〉。起初我一直想得是如何將圖層分開，只隱藏外框還看得到看版圖……不過結果是我還是找不到辦法，只能等有機會在向懂得人請教，當然也有可能是改不了的。
　　如果您也想隱藏看板區，就請跟著我這樣做，只要在上方語法加上「display:none;」，那麼看板區就會整個消失了。
　　例如：
　　　.cover_pic{
　　　display:none;
　　　}
　　就這麼簡單，「display:none;」可以應用在許多地方，不過小心小屋壞了不一定救得回來。
　　就我幾次嘗試所知，看版圖區不能修改寬度，它是鎖住的狀態。（比較有可能是我懂得太少，所以不會。）
　　－補充觀念－－
　　yannan1 (毀滅者) 時間：2007-09-13 12:54
　　我偷偷跑進去櫻澤楓(joe0145)裡面看的結果，
　　其實要讓他不見是很簡單的(之前竟然都沒想到)，
　　就是直接將高度設成0
　　「height=0px;」
　　－－－－－－－

/*--------------------勇者基本資訊和能力表--------------------*/
/*-------給紅心的敘述文字-------*/
.heartGP{
color:#e9546b;
}

/*------------評價區底色------------*/
.apprise_bg{
background-color:none; /*無設定背景色*/
background-image : url(http://); /*背景圖*/
background-repeat:no-repeat; /*背景圖不重複*/
background-position:90% 80%; /*背景圖至於X軸90%Y軸80%處*/
}

/*--顯示個人能力數值的底圖--*/
.ability {
color:ef7781; /*數值的顏色*/
BORDER:#b23535 1px solid; /*數值框的框色*/
PADDING:1px; /*內文與邊界的距離*/
LINE-HEIGHT:14px; /*字行的高度*/
TEXT-ALIGN:center; /*文字置中*/
TEXT-DECORATION:none; /*文字無特殊樣式*/
}

－－－－－－－－
　　完……唔嘎，別打我，可是從這部分開始本來就沒啥好說的嘛──（抖）
　　好，好啦，補充發光文字的語法…＜此濾鏡效果只有ＩＥ才會顯示＞

　　看到我家小屋紅心的文字了嗎？它那紅得很特別的語法是這個↓
　　.heartGP{
　　color: #ffffff;
　　filter: glow(color:#e9546b,strength=3);
　　}
　　color是文字的顏色，而在filter中的color則是光的顏色，而「strength」是發光的強度。
　　自己玩玩看吧，它可以加在很多設定文字的地方，不過，設定時要留意大篇幅的發光，會不會使得訪客瀏覽上的不舒適或是網頁瀏覽變慢喔＠。＠