【小屋】CSS自訂版面：三、最上方顯示大圖篇

前言：＜本文發表於2007/09/04 最後修改於2007/09/04 19:５８　如語娃娃＞
　　以下內容可以對照「CSS自訂面板」的語法內容。
　　‧本篇僅提供顯示大圖篇，因為選單部份、選單與內文銜接部分將一次說明。
　　‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼，只是「#」不要忘記加了。
　　　例如：#FFFFFF(白色)可換成#b23535(咖啡紅)，簡單取得色碼的方法
　　　　1.參考巴哈小屋提供的色盤
　　　　2.到日本網站的「原色大辭典(連結)」
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。

───────────────────────────────────────────
───────────────────────────────────────────
/*-----------------------最上方顯示大圖-----------------------*/
.banner{
background: url(http://pic.bahamut.com.tw/HOME/92/head_indream228.JPG);
background-repeat:no-repeat;
/*背景圖不重複，重複樣式可參考之前的教學。*/
background-attachment: fixed;
/*背景圖浮水印，其實它在表格中不會動，可以不用加這個(笑)。*/
background-position:50% 100%;
/*背景圖放置的位置(X軸<越大越右方>，Y軸<越大越下方>)*/
/*基礎： top(向上對齊)、bottom(向下對齊)、lef(向左對齊)、right(向右對齊)、center(置中對齊)*/
/*進階：90% 90%(背景圖片x與y軸的位置)*/
height:200px;
/*表格的高度。無法設定寬度，原寬度設定已鎖。*/
padding-left:20px;
/*內文與表格左邊邊界的距離。可以以邊界距離來調整內文呈現的位置。*/
padding-top:2px;
/*內文與表格上邊邊界的距離*/
}
/*小屋上方主圖*/

.banner_t1{
color:#003322;
/*無連結效果的文字顏色「()」*/
font-weight:bold;
filter: Alpha(opacity=0);
height : 0px;
/*隱藏無連結效果的文字*/
}

.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color: #003322;
font-weight:bold;
text-decoration:inherit;
/*連結文字樣式，無效果。*/
filter: Alpha(opacity=0);
height : 0px;

/*隱藏有連結效果的文字*/
}
/*暱稱和帳號文字*/

.banner_t3{
color:#003333;
height:150px;
/*格子的高度，搭配文字的位置可以以此來拉開它和「暱稱與帳號」或下方「官階與稱號」間的距離*/
line-height : 20px;
/*設定當下文字的行高(不會影響到其他的文字)，太小的話小心文字不見唷XD*/
text-align:right;
/*文字靠右對齊。其他：left文字靠左對齊、center文字置中對齊、justify文字分散對齊*/
vertical-align:text-top;
/*文字垂直向上對齊。bottom垂直向下對齊、middle垂直置中對齊、text-top文字垂直向上對齊、text-bottom文字垂直向下對齊*/
}
/*碎碎唸文字顏色*/
/*實際效果可參考我家的頂圖＠ˇ＠*/

.banner_t4{
color:#b23535;
}
/*顯示官階的文字顏色，沒什麼用啊這個設定@@…*/

.banner_t5{
color:#b23535;
/*顯示稱號的文字顏色*/
text-align:center;
padding-left:100px;
/*顯示稱號的文字，與左邊稱號圖章距離*/
padding-right:100px;
/*顯示稱號的文字，與右邊勳章距離*/
}

－－－－－－
　　有些人家的暱稱和稱號會在中間是調整邊界距離的結果˙ˇ˙
　　不過，如果你有習慣用個人的碎碎念文字的話，這個功能就不太方便囉。
　　不然就是參考「羅侯(helmet)」的聰明方式，將碎碎唸加到背景圖去。

───────────────────────────────────────────
───────────────────────────────────────────
對於本篇設定頂圖的後語：
　　雖然拉開頂圖不是不好，不過屋主可能需要稍為考慮到訪客在觀看每一篇文章的方便性，因為頂圖是套用到每一區的，在頂圖過大的狀況下，會使訪客常常要拉畫面才看得到內文喔──週而復始之下，像我這種懶人會覺得有點……。
　　頂圖的必要性或許在接下來講解到設定小屋區背景時，或許可以不用調那麼開，呵。