第一橫框＜主頂欄＞
| /* 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;} #yblast{zoom:1; position:relative; top:0px; left:0px; margin:0 0 1px 0; z-index:2;} #yblast .text, #yblast .bg{overflow:hidden; padding:5px 5px; width:47px; height:45px;} #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;} |
| 前言 | 部落格主體 | 部落格頂部的三橫框 | 主文區 | 左右欄框 |
| 其他功能效果 | 網路空間申請教學 | 部落格範本 | 發文 常用語法 | CSS 語法教學連結 |
全站熱搜
留言列表
