★ Ｂｌｏｇ 語 法 大 解 析 ★



雙のｌｏｇｏ



隱藏ｙａｈｏｏ！Ｌｏｇｏ


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


ＣＳＳ圖檔加框


一般圖檔連結的樣子


語法：<img src="圖檔網址" width="寬" height="高">


一般圖檔連結加（黑）框的樣子


語法：<img src="圖檔網址" border="4">
說明：4＝框的大小


ＣＳＳ表格框線語法：為圖片加框的樣子


語法：：<img src="圖檔網址" style="BORDER-RIGHT: #ff6666 5px dotted; BORDER-TOP: #ff6666 5px dotted; BORDER-LEFT: #ff6666 5px dotted; border-bottom:#ff6666 5px dotted">
說明：
border-top（頂部）
border-bottom（底部）
border-left（左）
border-right（右）
#ff6666（色碼）
1px（框線寬度）


框線樣式選擇：
none（無邊框）
dotted（點線）
dashed（虛線）
solid（實線）
double（雙線）
groove（立體凹線）
ridge（立體凸線）
inset（立體嵌入線）
outset （立體隆起線）
#0033FF（色碼）


部落格除框．加框


無框線版面－讓整個部落格框線消失語法：


/*shared rounded corner for all modules無框線語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url() repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


邊框圖版面－讓整個部落格加邊框圖語法：


/*shared rounded corner for all modules加框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(上邊框圖檔網址) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(右上角圖檔網址) right top no-repeat;height:30px;font-size:0;position:relative;right:-5px;}


.ycntmod .rcbtm {zoom:1;background:url(下邊框圖檔網址) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(右下角圖檔網址) right bottom no-repeat;height:30px;font-size:0;position:relative;right:-5px;}


.ycntmod .rcl {padding-left:12px;background:url(左邊框圖檔網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:12px;background:url(右邊框圖檔網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


圖片語法．有ㄉ不適用在ｙａｈｏｏ


鎖圖


語法：<IMG SRC="圖片網址" onmousedown="alert('打你想出現的字！')">


貼圖


語法：<img src="">
說明：圖檔必須為gif、bmp、jpg、png...。


圖片透明化


語法：<img src="圖檔網址" style="filter:Alpha(Style=n)"> n=1~3
說明：n值越大越透明，最大為3，建議用2


圖片加框


語法：<img src="圖檔網址" border=?>
說明： border= 框線大小。


圖片大小


語法：<img src=" 圖檔網址" height=? width=?></marquee>
說明：height=高度；width=寬度。


圖片加註解


語法：<img src="圖檔網址" alt=""""""""要註解的字>
說明：" " alt=圖片說明，把滑鼠移到圖片上即可看到所輸入的字。


圖片位置


語法： ：<p align=center><img src="圖檔網址"></p> 說明：center=圖片居中；left=圖片靠左；right=圖片靠右。



圖片跑馬燈移動
 
語法：
往左 <marquee behavior=side direction=left><img src="圖檔網址"></marquee>
往右 <marquee behavior=side direction=right><img src="圖檔網址"></marquee>
往上 <marquee behavior=side direction=up><img src="圖檔網址"></marquee>
往下 <marquee behavior=side direction=down><img src="圖檔網址"></marquee>
左右 <marquee behavior=alternate><img src="圖檔網址"></marquee>


圖片連結加註解
 
語法：
說明：_blank=另開一新視窗，如果你不想另開，把target="_blank"去掉即可。
alt=""""""""圖片說明，把滑鼠移到圖片上即可看到所輸入的字。""""""""


扭曲變形的圖
 
語法：：<IMG SRC="圖片網址"style="Filter:Wave(strength=9,freq=,
lightstrength=23,phase=80)">


＝觸摸圖片時產生語法效果＝


滑鼠移到圖片時變黑白
 
語法：<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='gray'
"onMouseOut="this.style.filter=null">


滑鼠移到圖片時變黑


語法：<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='xray'
"onMouseOut="this.style.filter=null">


滑鼠移到圖片時變底片圖


語法：<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='invert'
"onMouseOut="this.style.filter=null">
 
灰階影像


語法：<IMG SRC="圖片網址" STYLE="FILTER: Gray(Color=blue)">


負面效果


語法：<IMG SRC="圖片網址" STYLE="FILTER: Invert(Color=blue)">


 透明遮罩


語法：<IMG SRC="圖片網址" STYLE="FILTER: Mask(Color=blue)">


觸碰淡化


語法：<img SRC="圖片網址" onmouseout="this.filters.alpha.opacity=100"
onmouseover="this.filters.alpha.opacity=50"
style="filter:alpha(opacity=100)">
 
隱約美化


語法：<img src="圖片網址"style="filter:wave(strength=0,freq=3,phase=8,lightstrength=10) Alpha(Opacity=100, style=2)">


改變個人性別圖－自我介紹處


語法：
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:60px;height:75px;background:url(圖片網址) center no-repeat;}
說明：
#ymodprf .horos img{display:none;}（此行是先將性別圖示隱藏起來）
center（圖片置中）
no-repeat（圖片不重覆）
width:60px;height:75px（圖片寬和高）


變更訂閱部落格圖案


變更訂閱部落格圖案語法：


/*btnsbsrb*/
div#btnsbsrb a{display:block;width:110px;height:31px;overflow:hidden;background:url(圖片網址) no-repeat;margin:0;}
div#btnsbsrb_nologin a{display:block;width:110px;height:31px;overflow:hidden;background:url(圖片網址) no-repeat;margin:0;}
#yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}
說明：
圖片的寬度(width)與高度(height)可自行更改想要的大小


圖不變．將訂閱部落格移至左邊語法：
 
/*btnsbsrb*/
div#btnsbsrb a{display:block;width:750px;height:20px;overflow:hidden;no-repeat;margin:0;}div#btnsbsrb_nologin a{display:block;width:750px;height:20px;overflow:hidden;no-repeat;margin:0;}


部落格欄位邊框加框線


整個部落格邊框線效果語法：
　　　
/*部落格大框線*/
body {border: 5px double #0033FF ;}


部落格名稱欄邊框線語法：


/*Opacity for blogtitle上橫框 框線*/           
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm,


#yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:77)
border-bottom:3px double #0033FF ;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF }


文章欄位邊框線語法：


/*Opacity for main content文章區框線*/              
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div


{zoom:1; filter:alpha(opacity:78)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}


左右欄位邊框線語法：


/*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:79)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}
說明：（只需在這幾個地方做變更即可）
opacity:79（透明指數．越小越透明）
3px（數字越大邊框越粗）
double（更改樣式邊框樣式也會不同）


邊框樣式：請參考上面＂邊框樣式選擇＂


欄位背景底圖


背景固定語法：


/*Background*/
body {
background-image: url(圖片網址);
background-repeat:no-repeat ;
background-position :0% 50%;
background-attachment: fixed;}


如不想調整．直接以圖片的大小來用的語法：


/*Background*/
body{background-image:url(圖片網址);background-attachment:fixed;}


＝background-attachment:fixed＝後面這句就是背景固定
說明：（百分比可更改）
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
background-repeat:no-repeat :圖片如為小圖可用repeat(重覆)如為大圖可用no-repeat


文章背景圖語法：


/*Main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfotable, #yusrintro p{background-image:url(圖片網址);color:#666}
#ymodcal .mbd td strong {color:#333;}
說明：
color:#666（文章分類的顏色）
color:#333（日曆開始的顏色）


左右側內容底圖語法：


/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #FFFFFF;background-image: url(圖片網址);color:#FF0000}
說明：
#FFFFFF（內容底色）
#FF0000（內容字體顏色）


部落格最上方控制列背景圖及文字顏色（置頂區）語法：


/*Master header*/
#yhtw_masthead{background-image: url(圖片網址);color:#FF47D1 ;filter:alpha(opacity=80); opacity:1; moz-opacity:1;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#FF47D1;}
說明：
color:#FF47D1（上方控制列部落格字樣的顏色）
opacity=80（是指透明度，越小越透明）
color:#FF47D1（上方控制列文字顏色）


部落格名稱字顏色．底色及字體和底圖語法：


/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{background:url(圖片網址); color:#ffffff;font-family:標楷體;font-size:130%}
#yblogtitle h1{color:#008000;background-color: #E1FFE1;font-family:標楷體;font-size:130%}
說明：
color:#ffffff（介紹詞文字顏色）
color:#008000（部落格名稱文字顏色）
background-color: #E1FFE1（部落格名稱文字底色）
;font-family:標楷體;font-size:130%（套入想要的字型及字的大小．如不想變更可不加）
如不想加底圖只想要底色的話．把 "background:url(圖片網址)" 換成 "background-color:色碼"即可


招呼語底圖語法：


/*Opacity for blast*/  
#yblast .bg {zoom:1; filter:alpha(opacity:50); background: url(圖片網址) no-repeat;padding-left:32px;font-family:華康娃娃體}
說明：
no-repeat（圖片不重覆，如果是小圖可用repeat即可）


欄位標題底圖


中間文章欄位標題底圖語法：　　　


/*Main content header*/
.yc3pribd .mhd{ background:url(圖片網址) repeat; color:#333;}
說明：
repeat（圖片重覆．如不重覆在前面加上no即可）


左右側欄位標題底圖：


/*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:#e3e3e3; color:#6A8F9A; background-image:url(圖片網址);}
說明：
background:#e3e3e3（標題底色）
color:#6A8F9A（標題字體顏色）


游標、連結變更


圖片式游標變更語法：


body{cursor:url(游標網址一)}                       
a:hover {cursor:url(游標網址二)}
說明：
游標網址一（網頁上的游標樣子）
游標網址二 （滑鼠移到連結時的游標樣子）


＝另一種．軟微預設的游標滑鼠語法＝


/*Background*/
 body{ background:#D2F0FF url(http://xxxxx.gif) repeat;
 cursor:crosshair;}
 a:hover{cursor:cursor:crosshair;}


微軟游標樣式：
十字型－style="cursor:crosshair"
十字箭頭型－style="cursor:move"
問號型－style="cursor:help" 
一字箭頭型－style="cursor:e-resize"
小一字箭頭型－style="cursor:w-resize"
左斜箭頭型－style="cursor:nw-resize"
說明：
在{cursor;}裡輸入微軟預設的滑鼠樣式即可。


ｐｓ微軟預設樣式和游標圖案下載↓
http://sheng.phy.nknu.edu.tw/wjs-13ani.htm
http://benz.nchu.edu.tw/~s9163030/wretch/wretch.htm#10.HTML


連結去除底線和連結字體的顏色語法：


/*Links*/
a:link,a:visited{color:#33cc33;text-decoration: none}
a:hover{color:#cc99ff;background-color: #ffff99}
說明：
#33cc33（部落格中連結字體顏色）
text-decoration: none（去除底線的指令）
#cc99ff（滑鼠停在部落格超連結字的體色）
#ffff99（滑鼠停留在部落格超連結字體的底色）


＝連結樣式進階版語法１＝
a:visited {color:#33ff00}       
a:active {color:#ffffff}
說明：（直接補貼至上方/*Links*/語法即可）
#33ff00（參觀過的連結字體顏色）
#ffffff（執行中的連結字體顏色）


＝連結樣式進階版語法２＝
border-top-style : outset;
border-top-color : #ff6600;
border-top-width : 3px;
border-bottom-style : outset;
border-bottom-color : #0000ff;
border-bottom-width : 3px;
說明：（直接補貼至上方/*Links*/語法即可．但必須加在「 } 」裡）
border-top-style（連結字體上框樣式）
border-top-color（連結字體上框顏色）
border-top-width（連結上框的粗細．數字越大框越粗）
border-bottom-style（連結字體下框樣式）
border-bottom-color（連結字體下框顏色）
border-bottom-width（連結下框的粗細．數字越大框越粗）


欄框樣式選項：請參考上面＂邊框樣式選擇＂



欄位標題前＋小圖案


文章標題前＋小圖及文章標題的字型更改及顏色變換語法：


/*article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:150%;font-weight:bold;background:url(圖片網址) no-repeat;padding-left:32px;font-family:華康娃娃體}
.yblogcnt .blgtitlebar h2 a {color:#195693; padding-right:5px;}
說明：
font-size:150%（字型的大小．數字越大字越大）
32px（圖片與字體的差距）
font-family:華康娃娃體（字體可直接打進去更換電腦裡有的即可）
color:#195693（色碼）


更新日期欄的標題小圖語法：


/*Module latest upup*/
#ymodupdate .mbd .date{background:url(圖片網址) left center no-repeat;padding-left:11px;font-size:104%;font-family:verdana;}
說明：
11px（圖案與字的差距）


左右欄位標題前小圖語法：


/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(第一個圖片網址) left .1em no-repeat;padding-left:25px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(第二個圖片網址) 48px center no-repeat;}
說明：
1em（圖片下移數值．數字越大下移越多）
25px（文章標題前面圖檔和右邊文字相差距離．數字越大．兩者之間距離越遠）
3px;_margin-bottom:3px;_line-height:1.5em（行距高度倍數．數字越大．高度倍數越高）
第一個url是文章標題前面圖檔．第二個url是所有文章和更多回應圖檔


ｆｌａｓｈ動畫中插入文字的方法和技巧


請參考以下網址：http://lyc007sos.googlepages.com/e


arrow
arrow
    全站熱搜

    Ben 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄