部落格佈置：三橫框－DIY玩化學

第一橫框＜主頂欄＞

/* Master header　第一橫框＜主頂欄＞*/
#yhtw_masthead{color:#666; background:#c5c5c5; filter:alpha(opacity=100); opacity:1; moz-opacity:1;}
#yhtw_masthead a, #yhtw_masthead a:link, #yhtw_masthead a:visited, #yhtw_masthead a:hover{color:#fff;}

語法說明：

#yhtw_masthead{……}	masthead 為 Master header 之變化字；意思為「報頭」，即部落格頂
color:#666;	經測無作用（刪除也無妨）
background:#c5c5c5;	背景色（底色）（測試暫改為 808000 深黃）
filter:alpha(opacity=100)	底色透明度＜過濾:最初、開端（不透明）＞
opacity:1;	經測無作用（刪除也無妨）
moz-opacity:1;	經測無作用（刪除也無妨）

#yhtw_masthead a,	呼叫主頂欄使用 a 集合的功能
#yhtw_masthead a:link{……},	加上{color:#0000FF;}可改變【服務說明】的字色＜link=連結＞
#yhtw_masthead a:visited{……},	加上{color:#0000FF;}可改變４個捷徑鈕字的字色。↑服務說明有定義色時依其定義＜visited=拜訪＞
#yhtw_masthead a:hover{color:#fff;},	定義所有捷徑鈕字之底色（底色=上面↑定義後之底色，↑如無定義為４個主捷徑之字色，）４個主捷徑指：部落格首頁、服務首頁、服務說明、奇摩首頁＜hover=徘徊＞
這也是說…只要您願嘗試，CSS 很多地方都能任您加上控制元件的，等待您的發掘…。當然…您想在這裡做字型控制或變化也行，但是沒有意義吧！

語法範例：

/* Master header　第一橫框（主頂欄）*/
#yhtw_masthead{background:#808000; filter:alpha(opacity=50); }
#yhtw_masthead a ,#yhtw_masthead a:link{color:#00FF00;} ,#yhtw_masthead a:visited{color:#00FFFF;} ,#yhtw_masthead a:hover{color:#FF00FF;}

第二橫框＜部落格名稱＞

/* Blog title　第二橫框＜部落格名稱＞*/
#yblogtitle h1{color:#333;}
#yblogtitle .mbd, #yblogtitle .mft{background-color:#A4A4A4; color:#666; }

語法說明：

#yBlogtitle h1{……}	定義名稱框之標題字＜Blogtitle=部落格名稱＞
color:#333;	字色
font-family:標楷體;	字樣式（需對方也有此字體才行）＜字-家族＞
font-weight:bold;	粗體字
background-color: #FF00FF; 或 background:#FF00FF;	底色（二式都可用），定底色似乎無意義。應該有辦法讓滑鼠移至時改變字色，像連結字串一樣。

#yBlogtitle .mbd, #yBlogtitle .mft{……}	定義名稱框之內容
用 #yBlogtitle .rctop, #Blogtitle .rctop div, #yBlogtitle .rcl, #yBlogtitle .rcr, #yBlogtitle .rcbtm, #yBlogtitle .rcbtm div{……} 也可以定義
color:#666;	字色
font-size:120%;	字體大小（會連上面的標題字一起改變）奇摩在這非自定框無法使用 pt 來調大小
background-color:#A4A4A4;	背景色（如設↓貼圖可以不設這個）
background-image: url(圖檔位址);	背景圖（可配合下式↓一起用）
background-repeat:repeat;	背景重複貼（使用↑貼圖時，除非圖檔尺寸剛好否則會有留白。如未用 repeat 可改用 no-repeat 或 repeat-x 則只會單圖顯示。）
zoom:1;	把圖層上昇到第１層，要調↓透明度時一定要設＜zoom=上昇＞
filter:alpha(opacity=50);	底色透明度＜過濾:最初、開端（不透明）＞
框線也可以定義，方法參同上一篇【Blog 框線設定】將元件加入。例如：border:3px outset #008000;

語法範例：

/* Blog title　第二橫框（部落格名稱）*/
#yblogtitle h1{color:#438059; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{color:#FF0000; font-size:130%; background-color:#808000; zoom:1; filter:alpha(opacity=0); }

改變【訂閱部落格】圖示：

/* Subs list 改變【訂閱部落格】圖示＜訂購名單、目錄＞*/
div#btnsbsrb a{display:block; width:88px; height:25px; overflow:hidden; background:url(圖址) no-repeat; margin:0;}
div#btnsbsrb_nologin a{display:block; width:88px; height:25px; overflow:hidden; background:url(圖址) no-repeat; margin:0;}
#yblogtitle .tft {text-align:right; padding-bottom:0px; position:relative;}

語法說明：

div#btnsbsrb a{……} div#btnsbsrb_nologin a{……}	用於給已登入奇摩帳號的人看到的圖用於給【遊客、未登錄者】看到的圖（其實只貼↑第一式就好了）
display:block;	display:block=展開、顯示：方塊
width:88px; height:25px;	圖大小＜width=寬。height=高＞（註：可以把寬拉大，讓圖左移。1024顯示的框寬約970）
overflow:hidden;	overflow:hidden=溢出：隱藏
background:url(圖址) no-repeat;	圖位址_不重疊
margin:0;	＜margin=邊緣＞

#yblogtitle .tft {……}	調整與名稱框底線距離（除非想拉開距離，否則可以不用設此式）
text-align:right;	text-align:right=本文、主題－排成一行、調準：靠右 lift=靠左，但設了沒感覺咧～，有人用前式↑把寛拉大讓圖左移
padding-bottom:0px;	可以只用這元件（padding-bottom=填塞、填料－底部）
position:relative;	position:relative=位置、狀態：相對的、成比例的

語法範例：

/* Subs list　改變【訂閱部落格】圖示*/
div#btnsbsrb a{display:block; width:1200px; height:31px; overflow:hidden; background:url(http://blog.yam.com/sc0720/31ba08cc.gif) no-repeat; margin:0;}

招呼語框透明度＜突出物的透明度＞

/* Opacity for blast　招呼語框透明度＜突出物的透明度＞*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://tw.yimg.com/i/tw/blog/yimg/blast_bg1.gif) no-repeat}

原式只為了顯示奇摩的框，所以改為下式↓。
不想顯示，直接從【部落格設定→招呼語設定→隱藏招呼語】關了它即可。

/* blast　突出框（招呼語框）*/
#yblast .bg{zoom:1; filter:alpha(opacity:100); background:#FFFF00;}
#yblast .text{color:#FF0000; font-size:180%; font-family:標楷體;}
#yblast .text a{display:none;}

語法說明：

#yblast .bg {……}	定義突出框
zoom:1; filter:alpha(opacity:100);	圖層昇至第１層，並定義其透明度＜filter:alpha(opacity:…)=過濾:最初(不透明：)＞
background:#FFFF00;	底色。優先於↓背景圖，且無法並存
background: url(框圖位址) no-repeat;	呼叫圖框，並定義不重複貼圖
width:450px;	也可以定義寬。如也定義高（height），因置被固定，高度不夠時會裁切上緣，所以字可能被裁
奇摩的圖框位址是：http://tw.yimg.com/i/tw/blog/yimg/blast_bg4.gif 編號由 1-7

#yblast .text{……}	突出框字體設訂＜text=原文、本文＞
color:#FF0000;	字色
font-size:18pt; font-size:180%;	字大小
font-family:標楷體;	字樣式（需對方也有此字體才行）

#yblast .text a{display:none;}	設訂是否顯示【我要留言】＜display:none=展開、顯示：並不＞

另外有些語句舉例如下↓。除非您要調整圖框位置，否則沒有多大意義，可以不用玩它： #yblast .text{zoom:1; margin:0px 0 0;} 將 0px 設值後，字會向下位移，但後二值只要有設，卻又歸位了 #yblast{zoom:1; position:relative; top:0px; left:0px; margin:0 0 1px 0; z-index:2;} position:relative;　←＜位置：相對、有關係＞ top:0px;　←與上緣距（從內文欄頂起算，不過…測了半天又不像 >_<） left:0px;　←與左側距（從內文欄左起算） margin:0 0 1px 0;　←1px=框頂與內文框頂距（內文框會因此而位移）＜margin=邊，加邊＞ z-index:2;　←＜index=索引＞ #yblast .text, #yblast .bg{overflow:hidden; padding:5px 5px; width:47px; height:45px;} #yblast .text, #yblast .bg{……}　←＜text=原文、本文＞ overflow:hidden;　←＜溢出、超過界限：隱藏＞ padding:5px 5px;　←＜padding=填塞物＞ width:47px; height:45px;　←設框大小，都設 0 會隱藏招呼語框 #yblast a.edit{background:url(圖址); width:100px; height:30px;}　←測後無作用＜ edit=編輯、校訂＞

語法範例：不想顯示，直接從【部落格設定→招呼語設定→隱藏招呼語】關了它即可。

/* blast　突出框（招呼語框）*/
#yblast .bg{zoom:1; filter:alpha(opacity:100); background:#FFFF00; width:425px; height:30px; }
#yblast .text{color:#FF0000; font-size:18pt; font-family:標楷體;}
#yblast .text a{display:none;}

http://tw.myblog.yahoo.com/My-Happy/article?mid=7&prev=8&next=6&l=a&fid=7