close


 ～~感謝"芭樂園"分享~(請關掉背景音樂)~～ 
































　



　






第一橫框＜主頂欄＞






/* 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 a, #yhtw_masthead .mhuser p, #yhtw_masthead div, #yhtw_masthead div span{display:none;}

語法說明：











































#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=連結＞
11月上旬奇魔又改成是變更【Yahoo 奇摩】字色，還真是奇魔無誤。

#yhtw_masthead a:visited{……},


加上{color:#0000FF;}可改變４個捷徑鈕字的字色。↑服務說明有定義色時依其定義＜visited=拜訪＞

#yhtw_masthead a:hover{color:#fff;},


定義所有捷徑鈕字之底色（底色=上面↑定義後之底色，↑如無定義為４個主捷徑之字色，）
４個主捷徑指：部落格首頁、服務首頁、服務說明、奇摩首頁＜hover=徘徊＞
這也是說…只要您願嘗試，CSS 很多地方都能任您加上控制元件的，等待您的發掘…。當然…您想在這裡做字型控制或變化也行，但是沒有意義吧！
　

#yhtw_masthead a,

　

#yhtw_masthead .mhuser p,

　

#yhtw_masthead div,

　

#yhtw_masthead div span {display:none;}


＜span=跨越、延伸＞＜display=展開、顯示＞
這語法將消除第一橫框之內容（含 Yahoo logo、所有連結），只剩底色。
　　

語法範例：






/* 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;}


奇摩部落格頂端欄位背景透明化語法：
/*Master header置頂欄位文字消失*/
#yhtw_masthead{color:#666; background:#c5c5c5; filter:alpha(opacity=0); opacity:1; moz-opacity:1;}
#yhtw_masthead a,
#yhtw_masthead a:link,
#yhtw_masthead a:visited,
#yhtw_masthead a:hover{color:#fff;}
#yhtw_masthead .mhuser q{display:none;}

/* 隱藏頁首和頁尾 */
#yhtw_masthead,#yhtw_mastfoot{display:none;}


第二橫框＜部落格名稱＞






/* 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;}
















前言

主文區

左右欄框

部落格主體

部落格頂部的三橫框

部落格範本

其他功能效果

發文 常用語法

網路空間申請教學

CSS 語法教學連結






myshero重新整理編輯\97.10.11-06





 






 ～文章框架修改自~~"隨芯所欲"の作品~~～ 


 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Myshero 的頭像
    Myshero

    ╰☆ Myshero520╭☆

    Myshero 發表在 痞客邦 留言(2) 人氣()