★ Blog 語 法 大 解 析 ★



雙のlogo



隱藏yahoo!Logo


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


CSS圖檔加框


一般圖檔連結的樣子


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


一般圖檔連結加(黑)框的樣子


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


CSS表格框線語法:為圖片加框的樣子


語法::<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;}


圖片語法.有ㄉ不適用在yahoo


鎖圖


語法:<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;}裡輸入微軟預設的滑鼠樣式即可。


ps微軟預設樣式和游標圖案下載↓
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(滑鼠停留在部落格超連結字體的底色)


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


=連結樣式進階版語法2=
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是所有文章和更多回應圖檔


flash動畫中插入文字的方法和技巧


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


全站熱搜

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