BLOG語法大解析－培迪的痞客邦部落格

BLOG語法大解析

(圖檔連結)

圖檔連結(黑)框語法

CSS表格框線語法(圖片+框)

說明：
border-top（頂部）
border-bottom（底部）
border-left（左）
border-right（右）

框線樣試選擇：
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="圖檔網址" style="filter:Alpha(Style=n)"> n=1~3

PS：n值越大越透明，最大為3，建議用2

圖片+框語法

<img src="圖檔網址" border=框線大小>

圖片大小語法

<img src=" 圖檔網址" height=高度width=寬度></marquee>

圖片+註解語法

<img src=" 圖檔網址" alt="""""""""""""" 註解文字>

PS：："""""" alt="""圖片說明，把滑鼠移到圖片上即可看到所輸入的字。""

圖片位置語法

<p align=center><img src="圖檔網址"></p>

說明：center=圖片居中；left=圖片靠左；right=圖片靠右。
PS：center的部分可以換成以上英文(指↑藍色部分)

圖片連結+註解語法

<a href="要連結網址" target="_blank" alt="""""""""""""""""" 註解文字"><img"""""""""""" src="圖檔網址"></a>

說明：_blank=另開一新視窗，不另開-把target="_blank"去掉即可。
alt=""""""""""""圖片說明，滑鼠移到圖片上即可看到所輸入的字。"""""""""""

圖片效果

扭曲變形的圖語法

<IMG SRC="圖片網址"style="Filter:Wave(strength=9,freq=,
lightstrength=23,phase=80)">

PS：觸摸圖片時產生語法效果

滑鼠移到圖片時變黑白語法

<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)">

變更訂閱部落格圖案

變更訂閱部落格圖案語法

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

說明：圖片的寬度(width)與高度(height)可自行更改想要的大小

部落格欄位邊框+框線

整個部落格邊框線效果語法

/*部落格大框線*/
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 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（滑鼠停留在部落格超連結字體的底色）

連結樣式進階版語法

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是所有文章和更多回應圖檔

引用：http://tw.myblog.yahoo.com/jw!CUN9L0SLGRSg0Td5S5I-/article?mid=21156

oreokimo

培迪的痞客邦部落格

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

E-mail轉寄

培迪的痞客邦部落格

我是培迪(Oreokimo) 歡迎光臨 " 培迪在痞客邦的小天地" ！