۩۞۩ 背景語法大公開 ۩۞۩




2006/08/18 03:47



 


 















 　1.MV SWF 音樂、奇摩影音、You Tube 影音，播放語法。


 　2.最上面的置頂區塊下拉。


 　3.在部落格加外框。各欄位加邊框。


 　4.部落格名稱、描述欄框：改文字顏色及換底色為底圖。


 　5.左欄框：在標題文字欄位及內容欄位加上底圖。


 　6.最新文章欄框：標題欄、內文欄改文字色加底圖。


 　7.將招呼語預設框換成圖片。


 





 色碼表　         　　





　1.MV SWF 音樂奇摩影音You Tube 影片播放語法：　


語法範例：　


MV SWF 影音 音樂播放：




說明：


影音網址 width="影片寬" height="影片高" autostart=false enablecontextmenu="0">



例：http://tw.yimg.com/i/tw/search/video04/flashright.swf 　←可將此網址套進語法看看喔。


＼＼＼＼＼＼＼

將語法直接貼在文章發表的語法區內即可。文章發表下面有一個‵口觀看HTML 原始碼‵，前面口打勾就是貼語法區了。



音樂檔播放時：寬高是指影音播放器的大小。width="311"(影音播放器寬) height="47"(影音播放器高) 


副檔名 mv swf 音樂檔 都可以套進影音網址。


／／／／／／／


奇摩影音分享


部落格小子影音教學


部落格影音功能使用方式異動


卡通：戀愛學園　(直接複製語法。)


PS:本來以為自製的影片沒有上傳成功，結果剛剛又去看時，影片昨天上傳的影片突然出現了。好高興喔！有空可以看看喔！


 



說明：


在文章發表的語法區貼入複製的語法即可。有時影片不會顯現出來，多試幾次就ＯＫ了。


奇摩影音：上傳影片很慢，我製作了一部68ＭＢ的影片，上傳了三個小時，有傳完，可是影片沒有顯示，還是失敗了。等待是很費時的。所以乾脆就直接複製分享的影片來欣賞。


／／／／／／／　


You Tube  影片分享： http://www.youtube.com　


卡通：柯南片尾曲　(直接複製語法。)　





說明：　


在文章發表的語法區貼入複製的語法即可。有時影片不會顯現出來，多試幾次就ＯＫ了。　


You Tube 影片：這也是分享影片，進入You Tube選部喜歡的影片，直接複製語法貼入文章發表語法區就可以了。　





　2.最上面的置頂區塊下拉：　


 語法範例：＃玄音TEXT＃　示範　


body{ border-top: 20px dotted;border-color:#000000;}　　


說明：（上外框top。大小20px。點線dotted。黑色#000000。設定值可以更改。）　


語法可直接複製貼在ＣＳＳ底端即可。　


最上面的置頂區塊下拉，會有這種現象產生是因為加了上方外框的原因。　


外框就是可以把整個頁面圍起來的框，在這裡我只是要拉下置頂區塊，所以只貼入上外框語法。　





　3.部落格加外框及邊框。　


 部落格外框語法範例：＃本格示範＃　


body{
border-right: 5px double; 
border-top:  5px double;   
border-left:  5px double;   
border-bottom: 5px double;  
border-color:red;
}


說明：(上top下bottom左left右right。框大5小5px。雙線框double。紅色框red(#FF1100)。）　


設定值可以更改。色碼用英文字或代碼都可以，記得寫代碼時前面要加#。若只要上方框，就貼上方框語法，其他語法刪掉。　


body{
border-right: 粗細px 邊框樣式; 　　←右邊
border-top: 粗細px 邊框樣式;   　　←上方
border-left: 粗細px 邊框樣式;   　　←左邊
border-bottom: 粗細px 邊框樣式; 　←下方
border-color:顏色色碼;
}　


邊框樣式：


none(無邊框)　dotted(點線)　dashed(虛線)　solid(實線)　double(雙線)


groove(立體凹線)　ridge(立體凸線)　inset(立體嵌入線)　outset(立體隆起線)　　




欄位邊框語法範例：　


名稱標題欄邊框:


/*Opacity for blogtitle*/   
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:0);


border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px double;
border-color:RED;


}　


 說明：　


/*Opacity for blogtitle*/   ←名稱標題欄邊框
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:0);


border-right: 3px double;　
border-top: 3px double;
border-left: 3px double;
border-bottom: 3px double;
border-color:RED;


}　


(上top下bottom左left右right。框大小3px。雙線框double。紅色框red(#FF1100)。）　


opacity:0　←透明度　


在ＣＳＳ裡找到這個 /*Opacity for blogtitle*/  語法，把黃底色的語法複製加進去就可以了。


因為預設語法中，是沒有黃底色的語法，所以要自己另行加入。


記得語法要加在　}　符號裡面。設定值可以自行更改。欄位不想加框，就不用更動了。　


下面的左欄邊框　內文邊框說明都是如此。　


／／／／／／／　


左欄邊框:


/*Opacity for sub column*/ 
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:52);


border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px groove;
border-color:RED;}　


／／／／／／／　　


內文邊框:


/*Opacity for main content*/ 
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:0); 
border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px groove;
border-color:RED;
}　


 說明：　


※下面紅色語法是玄音TEXT裡的語法：只在新文章欄加左右框，大小5，點線(圓點)，白色框。　


/*Opacity for main content*/ 
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:100); 
border-right: 5px dotted;
border-left: 5px dotted;
border-color:#FFFFFF;}　　





　4.部落格名稱、描述欄框：改文字顏色及換底色為底圖。　


 語法範例：　


/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(http://www.demzen.dk/deco59/decorations3/demzen_deco_glitter_6.gif 
) repeat;background-color: #E1FFE1;}
#yblogtitle h1{color:#666666; font-weight:bold;}　


 說明：　


/*Blog title*/   ←部落格名稱描述欄，原預設值。
#yblogtitle .mbd,#yblogtitle .mft{background-color:#AA3F62; color:#FF9AD2;}
#yblogtitle h1{color:#FFC8E5;}　


/*Blog title*/　←加入了名稱描述欄框底圖（底色）
#yblogtitle .mbd,#yblogtitle .mft{圖片網址
) repeat;background-color: #E1FFE1;}
#yblogtitle h1{color:#666666; font-weight:bold;}　　


／／／／／／／



background-color: #E1FFE1　←標題框的底色


color:#666666;　←標題名稱文字的顏色






　5.左欄：標題字欄位及加上底圖。　


左欄標題欄位語法範例：　


/*Nav module header*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#FBF2CA; color:#90620E;
background-image:url(http://www.debukuma.com/sozia1i6/back/tail_c1/bgtc4r.gif); 
}　


說明：　


/*Nav module header*/  ←左欄標題欄，原預設值。只有底色。
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{background:#AA3F62;color:#EFDBE2;}　


/*Nav module header*/←在左欄標題欄位加入底圖
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{background:#FBF2CA; color:#90620E;
background-image:url(圖片網址); 


}　


／／／／／／／　


background:#FBF2CA; color:#90620E　←左欄標題底色。


background-image:url(圖片網址)　←左欄標題欄位加入圖片。　




左欄內容欄位語法範例：　


/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background-image:url(http://www.demzen.dk/hpting59/baggrund/baggrundeanimals/animal_baggrund_12.gif
);}　


說明：　


/*Nav module body*/←左欄內容欄位原預設值只有底色。
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background:#FFF4FA; color:#C7869F;}　


/*Nav module body*/←左欄內容欄位加入底圖
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background-image:url(圖片網址
);}　


／／／／／／／　


background-image:url(圖片網址)　←將左欄內容欄位的底色，改成圖片語法。　





　6.最新文章欄：標題欄、內文欄改字色加底圖。　


最新文章標題欄範例語法：　


/*Main content header*/


.yc3pribd .mhd{background:url(http://www.demzen.dk/animationer59/delfin/delfin7.gif) repeat; color:#FBF2CA;} 　


說明：　


/*Main content header*/  ←最新文章標題欄預設值。
.yc3pribd .mhd{background:#FA79C0; color:#AA3F62;}　


/*Main content header*/  ←最新文章標題欄加入底圖。


.yc3pribd .mhd{background:url圖片網址) repeat; color:#FBF2CA;}　


／／／／／／／　


background:url(圖片網址)←底色換成圖片。


repeat←圖片重覆貼滿。　




 最新文章內容欄範例語法：


/*Main content body*/  
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(http://www.h2.dion.ne.jp/~motherc/tyou13txt/tyou13img/tyou1309bg1.jpg
);
color:#1A4066} #ymodcal .mbd td strong {color:3B9DC1;}　


說明：　


/*Main content body*/    ←內文欄原預設值。
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{background:#FFF4FA; color:#8D0B36;}
#ymodcal .mbd td strong {color:#FC9557;}　


background:#FFF4FA; color:#8D0B36　←內文欄位底色。


color:#FC9557　←內文欄位文字顏色。　


／／／／／／／　


/*Main content body*/     ←內文欄位更換底圖。
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(http://www.h2.dion.ne.jp/~motherc/tyou13txt/tyou13img/tyou1309bg1.jpg
);
color:#1A4066} #ymodcal .mbd td strong {color:3B9DC1;}


background-image:url(圖片網址)　←內文欄位底圖。　





　7.將招呼語預設框換成圖片。＃本格展示＃　


語法範例：　


/*Opacity for blast*/  
#yblast .bg {zoom:1; filter:alpha(opacity:67); background: url(http://www.msjh.tp.edu.tw/~c207a/Image/A058.gif) no-repeat}　


 說明：　


/*Opacity for blast*/  ←招呼語
#yblast .bg {zoom:1; filter:alpha(opacity:67); background: url(圖片網址) no-repeat}　


／／／／／／／　


opacity:67：透明度多少。


no-repeat：圖片不重覆。


repeat：圖片重覆。會填滿整個招呼語框。　


※若圖片不夠大，則改為圖片重覆 repeat。只要將 no- 刪掉即可。　































































arrow
arrow
    全站熱搜

    彤 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄