我是勳爸(David's Dad),英文名字叫「Benjamin」,我的朋友同事都叫我「Ben」。 我兒冠勳因於 97/4/1 起正式進入〔台灣棋院〕擔任E組院生,加上柏瑋媽媽、林威媽媽及瑞麟媽媽,我們經常在圍棋比賽中對於孩子學圍棋的歷程相互討論及分享著點點滴滴,索性我就趁這個機緣成立了『勳家長的GO天空部落格』,所以幾個有關圍棋的主題,如【院生點滴】、【圍棋五四三】、【圍棋成長記錄】、【圍棋相關新聞】是必備的。 隨著我已步入不惑之年,對於【健康】的議題會特別的留意,所以相關網路文章的分享,亦會適時加入。
2008年5月30日 星期五
婚姻中有一種感動叫做守口如瓶!
沒朋友的員工最可怕
有一個弊案,甚至牽連到他。
2008年5月29日 星期四
如何輕鬆備份你的部落格 ?
如何輕鬆備份你的部落格 ?
想整篇發表引用的網友,只要複製下列語法,進入發表文章後,先將 觀看HTML 原始碼 打勾,再把語法貼進」空白內容」處,切記不可預覽,直接發表就可以囉 !如何使用懶人引用法?
想另開大畫面欣賞請按 http://tina123.ic.googlepages.com/0123122
9.完成了你可以按來看看.....
10. 進入你要網頁模樣,請看網址是c:開頭, 表示它是存在你的電腦而不是網路;
11.再到你存的目錄(預設是c:\My Websites\自定專案名稱)
如可用IE取得要引用文章的語法?
如題, 由於奇摩部落格限制EMBED語法使得我的懶人引用完全失效了,後來連轉址也被限制, 只好想出用此方法幫助習慣用語法引用的朋友。 其實原先懶人引用只是簡化用語法來發表,本篇是教大家如何用IE查原始檔的語法方便引用。 以下請大家看我的小小圖片示範:
本文出自 Tina~小小世界 http://tw.myblog.yahoo.com/tina88888888-babytony/ |
文章超連結貼圖法
文章超連結貼圖法
↑ 點圖以開新視窗顯示 ↑
語法 : (範例)
<a target="_blank" href="http://kosegallery.com/wap-025-1024.jpg">
<img src="http://kosegallery.com/wap-025.jpg" alt="""點圖開新視窗放大圖片""" width="150" height="150" border="0"></a>
一張圖等於要上傳兩張圖(部落格以外的圖片寄存空間),一張是直接顯示在部落格的小圖,一張是點小圖時的大張連結圖
解說 :
<a target="_blank" href="http://kosegallery.com/wap-025-1024.jpg">
<img src="http://kosegallery.com/wap-025.jpg" alt="""開新視窗""" width="150" height="150" border="0"></a>
target="_blank" = 另開新視窗(建議以另開視窗比較為宜,不會跳脫原來的網頁視窗)
http://kosegallery.com/wap-025-1024.jpg = 超連結大張圖片的網址(外部連結)
http://kosegallery.com/wap-025.jpg = 顯示在部落格圖片的網址(網頁視窗)
alt="""點圖開新視窗放大圖片" "" = 滑鼠指標靠近小圖顯示的對話題示(文字內容可以依個人需求做改變)
width="150" height="150" = 小圖的圖片尺寸,超連結的大張圖不用設定,直接以原圖規格顯示(例如原圖的本身尺寸是1024X768,顯現出來時就是1024X768,如果刻意以語法改變,會失去原圖的意義)
border="0" = 小圖框線的出細 0 為無框線,一般適合框線規格在1~3之間
如果不做超連結,這樣 <img src="http://kosegallery.com/wap-025.jpg" width="150" height="150" border="0"> 就可以了
PS : 語法與一般網頁通用,也可以運用在左右欄框及自己的 LOGO連結
LOGO 運用 :
<a target="_blank href=" 自己的部落格網址">
<img src="LOGO圖片網址" alt="""連結我的部落格""" width="100" height="30"></a>
改變部落格字體的語法
改變部落格字體的語法
<p><font size=3><strong>字放在這裡</strong></font></p>
1.點選發表文章
2.先打好文章內容
3.勾選左下方有一個 {觀看HTML原始碼}
4.勾選後..將語法貼進去..
語法說明
<p><font size=3><strong> 貼在所有文字最上面
</strong></font></p> 貼在文字最下方
<p><font size=3><strong> 更改數字可變換文字大小
所有的文章文字都使用同樣大小
語法
/*Text color for main content*文章欄位字體顏色*/
.yc3pribd .text {color: #0066ff;font-size:150%;font-family:標楷體;}
語法說明
font-family:標楷體; 如果你不想更換字體~就刪掉這些字~或更改成你
想要的字體
font-size:150%; 依你自己的喜好~~更改數字~~改成自己喜歡的大小
color: #0066ff; 如果你不想更改文字顏色~就刪掉這些字~
或更改成自己喜歡的顏色_____色碼表
1.你的大頭貼下方 「編輯個人檔案」點進去
2. 進入「管理部落格首頁」後,點選「面板設定」的「自訂樣式」
3. 然後將你想要更改那一部份的語法貼到所有文字的最下方
4.確定
語法
/*Text color for blog title*部落格標題字體顏色*/
#yblogtitle .text {color: #660099;font-family:標楷體;font-size:150%;}
/*Text color for main content*文章欄位字體顏色*/
.yc3pribd .text {color: #0066ff;font-size:150%;font-family:標楷體;}
/*Text color for module*左右欄位字體顏色*/
.text {color: #0066ff;font-size:150%;font-family:標楷體;}
/*Blog title*部落格標題大小顏色*/
#yblogtitle .mbd,#yblogtitle .mft{ font-family:標楷體;font-size:170%}
#yblogtitle h1{color:#FF0000;font-family:標楷體;}
/*Text color for blog title*部落格資料文字顏色*/
#yblogtitle .text {color: #FF0000;}
自己更改測試~~找出自己看起來最順眼的大小..顏色..字體
如果你是新手..對CSS不熟..會擔心CSS亂掉
你可以先將原來的CSS語法複製下來..貼在記事本
★ 部落格常用語法解說 ★
★ 部落格常用語法解說 ★
這是雙在各大部落格找到綜合起來的!
可幫助一些不懂英文語法意思的人.所做的中文解析!
*網頁超連結
語法說明:
/*主題*/ 內容標題 {常用修改樣式} /*Links網頁超連結*/ a,a:link,a:visited
(原始超連結文字)color:#FFFFFF(字體顏色)
font-family:新細明體(文字字型)
font-size:9px(文字尺寸)
font-weight:bold(文字粗體)
background-color:#FFFFFF(文字背景顏色)
position:relative;top:2px;left:2px(文字位移數值)
text-decoration:none(刪除底線)a:hover
(滑鼠經過時變化)color:#FFFFFF(字體顏色)
font-family:新細明體(文字字型)
font-size:9px(文字尺寸)
font-weight:bold(文字粗體)
background-color:#FFFFFF(文字背景顏色)
background-image:url(http://圖檔網址.gif)(文字背景圖檔)
border:1px dotted #FFFFFF(文字點狀框線)
position:relative;top:2px;left:2px(文字位移數值)
text-decoration:none(刪除底線)
範例:
/*Links網頁超連結*/
a,a:link,a:visited{color:#6600CC;text-decoration:none}
a:hover{color:#FFFF00;background-image:url(http://圖檔網址.gif);background-repeat:repeat;border:1px dotted #6600CC;position:relative;top:1px;left:1px}
*部落格背景
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Background部落格背景*/ | body (整個部落格背景) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-attachment:fixed(背景固定不動) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-repeat:repeat-x(背景在x軸重複排列) background-repeat:repeat-y(背景在y軸重複排列) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) |
範例:
/*Background部落格背景*/
body{background-color:#9966FF;background-image:url(http://圖檔網址.gif);background-attachment:fixed}
*奇摩置頂欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Master header奇摩置頂欄*/ | #yhtw_masthead (整列置頂欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-weight:bold(文字粗體) border:3px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) |
#yhtw_masthead .mhlogo (部落格logo) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) | |
#yhtw_masthead .mhuser (您好會員登出會.....) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) | |
#yhtw_masthead .mhsch (請選擇功能服務.....) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) filter:alpha(opacity=50)(背景透明度) |
範例:
/*Master header奇摩置頂欄*/
#yhtw_masthead{display:none}
*奇摩置底欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Master foot奇摩置底欄*/ | #yhtw_mastfoot (整列置底欄) | display:none(不顯示) |
範例:
/*Master foot奇摩置底欄*/
#yhtw_mastfoot{display:none}
*主標題欄位
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog title主標題欄位*/ | #yblogtitle .mbd (整個主標題欄) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) |
#yblogtitle .mbd .thd (主標題文字) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) font-size:9px(文字尺寸) text-align:center(文字位置) width:60px; height:60px(欄位尺寸) | |
#yblogtitle h1 (主標題文字超連結) | display:block; float:left(以圖檔為超連結) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-weight:bold(文字粗體) text-align:center(文字位置) width:60px; height:60px(欄位尺寸) | |
#yblogtitle .mbd .tbd (描述文字) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) | |
#yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Blog title主標題欄位*/
#yblogtitle .mbd{text-align:center}
#yblogtitle .mbd .thd{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:0% 100%;width:380px;height:45px;font-size:16px;text-align:right}
#yblogtitle h1{color:#FFFFFF;font-weight:bold}
#yblogtitle .mbd .tbd{display:none}
#yblogtitle .rctop,#yblogtitle .rctop div,#yblogtitle .rcl,#yblogtitle .rcr,#yblogtitle .rcbtm,#yblogtitle .rcbtm div{zoom:1;filter:alpha(opacity:0)}
*招呼語欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog blast module招呼語欄位*/ | #yblast (整個招呼語欄) | text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
#yblast .bg (招呼語欄背景) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) width:60px; height:60px(欄位尺寸) | |
#yblast .text (招呼語文字) | display:none(不顯示) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
範例:
/*Blog blast module招呼語欄位*/
#yblast{text-align:right}
#yblast .bg{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;width:150px;height:30px}
#yblast .text{font-size:10px}
*文章欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Article文章寬欄位*/ | .yc3pribd .mhd (文章標題欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
.yc3pribd .mbd (文章內容欄) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-attachment:fixed(背景固定不動) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.blgtitlebar h2 (文章內容標題) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.yc3pribd .rctop, .yc3pribd .rctop div, .yc3pribd .rcl, .yc3pribd .rcr, .yc3pribd .rcbtm, .yc3pribd .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Article文章寬欄位*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{color:#6600CC;font-size:10px;zoom:1;filter:alpha(opacity:0)}
.blgtitlebar h2{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;color:#FFFF00;padding-left:30px}
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div{zoom:1;filter:alpha(opacity:0)}
*左右窄欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog category list module左右窄欄位*/ | .yc3sec .mhd,.yc3sub .mhd (左右上標欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) |
.yc3sec .mhd h3,.yc3sub .mhd h3 (左右欄標題文字) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.yc3sec .mbd,.yc3sub .mbd (左右欄內容) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.ycntmod .mbd ul.list li (標前圖示) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) padding-left:25px(標題位移數值) _line-height:1.5em(標題行距倍數) | |
.ycntmod .mbd ul.list li.more (所有文章及更多回應) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) | |
.yc3sec .rctop, .yc3sec .rctop div, .yc3sec .rcl, .yc3sec .rcr, .yc3sec .rcbtm, .yc3sec .rcbtm div, .yc3sub .rctop, .yc3sub .rctop div, .yc3sub .rcl, .yc3sub .rcr, .yc3sub .rcbtm, .yc3sub .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Blog category list module左右窄欄位*/
.yc3sec .mhd,.yc3sub .mhd{filter:alpha(opacity=0)}
.yc3sec .mhd h3,.yc3sub .mhd h3{background:url(http://圖檔網址.gif);background-repeat:no-repeat;color:#FFFFFF;font-weight:bold;font-size:12px;padding-left:25px;padding-top:5px}
.yc3sec .mbd,.yc3sub .mbd{color:#6600CC;font-size:10px;zoom:1;filter:alpha(opacity:0)}
.ycntmod .mbd ul.list li{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;padding-left:25px;padding-top:10px;_line-height:1.5em}
.ycntmod .mbd ul.list li.more{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat}
.yc3sec .mhd a:visited,.yc3subbd .mhd a:visited{color:#FFFFFF}
*欄位框線圖
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Shared rounded corner for all modules欄位框線圖*/ | .ycntmod .rctop (框線左上角) | background:url(http://圖檔網址.gif) left top no-repeat(左上框線圖檔) margin-right:8px(右邊位移數值) |
.ycntmod .rctop div (框線右上角) | background:url(http://圖檔網址.gif) right top no-repeat(右上框線圖檔) height:30px (上方圖檔高度) right:8px(圖檔位移數值) | |
.ycntmod .rcl (框線左直線) | background:url(http://圖檔網址.gif) repeat-y(左直框線圖檔) | |
.ycntmod .rcr (框線右直線) | background:url(http://圖檔網址.gif) right repeat-y(右直框線圖檔) | |
.ycntmod .rcbtm (框線左下角) | background:url(http://圖檔網址.gif) left bottom no-repeat(左下框線圖檔) margin-right:8px(右邊位移數值) | |
.ycntmod .rcbtm div (框線右下角) | background:url(http://圖檔網址.gif) right bottom no-repeat(右下框線圖檔) height:30px (上方圖檔高度) right:8px(圖檔位移數值) |
範例:
/*Shared rounded corner for all modules欄位框線圖*/
.ycntmod .rctop{background:url(http://左上圖檔網址.gif) left top no-repeat;margin-right:20px}
.ycntmod .rctop div{background:url(http://右上圖檔網址.gif) right top no-repeat;height:20px;right:-20px}
.ycntmod .rcl{background:url(http://左直圖檔網址.gif) repeat-y}
.ycntmod .rcr{background:url(http://右直圖檔網址.gif) right repeat-y}
.ycntmod .rcbtm {zoom:1;background:url(http://左下圖檔網址.gif) left bottom no-repeat;margin-right:20px}
.ycntmod .rcbtm div {background:url(http://右下圖檔網址.gif) right bottom no-repeat;height:20px;right:-20px}
註:左右窄欄位的預設寬度為width:140px,設定為120px較不會影響框線
*捲軸
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Scrollbar捲軸區色彩*/ | html (網頁主體) | scrollbar-face-color:#FFFFFF(捲軸的軸面顏色) scrollbar-track-color:#FFFFFF(捲軸的軸軌顏色) scrollbar-3dlight-color:#FFFFFF(捲軸立體邊左上暗顏色) scrollbar-highlight-color:#FFFFFF(捲軸立體邊左上亮顏色) scrollbar-shadow-color:#FFFFFF(捲軸立體邊右下亮顏色) scrollbar-darkshadow-color:#FFFFFF(捲軸立體邊右下暗顏色) scrollbar-arrow-color:#FFFFFF(捲軸上下三角型顏色) |
範例:
/*Scrollbar捲軸區色彩*/
html{scrollbar-face-color:#9470DB;scrollbar-track-color:#C48AFF;scrollbar-3dlight-color:#AB57FF;scrollbar-highlight-color:#6B00D6;scrollbar-shadow-color:#AB57FF;scrollbar-darkshadow-color:#6B00D6;scrollbar-arrow-color:#7800F0}
*自我介紹
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Profile自我介紹欄*/ | #ymodprf (整個自我介紹欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#yprf (個人相片) | display:none(不顯示) | |
#ymodprf .nickname (個人暱稱) | display:none(不顯示) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) | |
#ymodprf .horos (個人星座) | display:none(不顯示) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) width:140px; height:60px(欄位尺寸) | |
#ymodprf .horos img (性別小圖示) | display:none(不顯示) |
範例:
/*Profile自我介紹欄*/
#yprf{display:none}
#ymodprf .nickname{font-size:12px;font-weight:bold;filter:alpha(opacity:0)}
#ymodprf .horos{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:0% 50%;color:#FFFFFF;width:40px; height:50px}
#ymodprf .horos img{display:none}
*更新日期
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog latest update module更新日期欄*/ | #ymodupdate (整個更新日期欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#ymodupdate .mbd .date (日期欄) | background-color:#FFFFFF(文字背景顏色) background-image:url(http://圖檔網址.gif)(文字背景圖檔) zoom:1;filter:alpha(opacity:0)(背景透明度) padding-top:10px(日期位移數值) |
範例:
/*Blog latest update module更新日期欄*/
#ymodupdate{display:none}
*部落格相簿
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog album module部落格相簿*/ | #ymodalbum (整個部落格相簿欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#ymodalbum h3 (部落格相簿文字) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:1px double #FFFFFF filter:alpha(opacity=50)(背景透明度) font-family:新細明體(文字字型) font-size:9px(文字尺寸) background-color:#FFFFFF(文字背景顏色) width:140px;height:60px(欄位尺寸) |
範例:
/*Blog album module部落格相簿*/
#ymodalbum h3{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:50% 100%;height:180px}
*留言版
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog guest book module留言板欄位*/ | #ymodmsgbd h3 (留言板文字) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:1px double #FFFFFF filter:alpha(opacity=50)(背景透明度) font-family:新細明體(文字字型) font-size:9px(文字尺寸) background-color:#FFFFFF(文字背景顏色) width:140px;height:60px(欄位尺寸) |
範例:
/*Blog guest book module留言板欄位*/
#ymodmsgbd h3{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:50% 100%;height:40px}
部落格語法教學
部落格語法教學
會隨時更新>ˇ<不能使用的語法請跟我說喔!!
以下是自訂欄位語法:
~使用自己樂果
<center><p></p>
<p><a href="網址"><img src="圖片網址" alt="""""""""""""""註解文字""""""""""""""" border="0" width="88" height="31"></a></p> <p><table border="1" width="126" cellspacing="0"><tr><td><a href="網址"><img src="圖片網址" alt=""""""""""""""""註解文字"""""""""""""""" border="0"></a></td></tr></table><br></center>
~圖片放置(沒連結)
<img src="圖檔網址">
~圖片放置(連結)
<a href="連結網址"><img src=" 圖片網址"><a>></a>
~目錄放置
<IMG src=目錄圖網址>
<A href="留言網址"><IMG src="留言圖片網址"></A>
<A href="相簿網址"><IMG src="相簿圖片網址"></A>
<A href="自製網址"><IMG src="自製圖片網址"></A>
~文字連結語法
<a href="網址">文字</a>
以下是使用自訂樣式CCS語法:
~招呼語框
/*Opacity for blast*/
#yblast .bg {zoom:1; filter:alpha(opacity:透明度); background: url(圖片網址) no-repeat}
透明度越大越不透明 透明度越小越透明
~性別圖
/*性別圖示*/
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:120;height:120px;background:url(登入圖網址) center no-repeat;}
(星座最好改為不顯示)
~游標
/*移到網頁時的滑鼠游標*/
body{cursor:url("未連結時游標")}
a:hover {cursor:url("連結時由標)}
~訂閱圖語法
/*btnsbsrb訂閱部落格圖示*/
div#btnsbsrb a{display:block;width:圖片的寬px;height:圖片的高px;overflow:hidden;background:url(訂閱圖片網址) no-repeat;margin:0;}
div#btnsbsrb_nologin a{display:block;width:圖片的寬px;height:圖片的高px;overflow:hidden;background:url(訂閱圖片網址) no-repeat;margin:0;}
#yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}
~標題圖語法:
/* 部 落 格 標 題 圖 */#yblogtitle h1 {display:block;float:left;background:url(標題圖網址) 0 0 no-repeat;width:圖片的寬px;height:圖片的高px;font-size:0;line-height:0;text-indent:-5000px;overflow:hidden;cursor:pointer;cursor:hand;}
~背景位置語法
body {
background-image: url(http://圖片網址.gif);
background-repeat:no-repeat ;
background-position :0% 100%;
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%; 右邊下方
~去除文字底線
/*Links文章去除連結底線*/a,a:link,a:visited{color:FA007A;text-decoration: none}
a:hover{color:FA007A;background-color: FA007A;text-decoration: none;}
a {text-decoration:none}
a:hover {position: relative; top: 2px;left:2px;}
~連結浮出效果
/*Links連結浮出效果*/
a:hover{ border: 2px #文字色碼 outset }
~回應跟引用更換圖片語法
/*make coomment bar回應跟引用更換圖片語法*/
div.btncomment a {display:block;height:高px;width:寬px;background:url(我要回應圖片網址) no-repeat;}
div.btntrackback a {display:block;height:高px;width:寬px;background:url(我要引用圖片網址) no-repeat;}
~部落格標題圖置中
/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{font-size:180%;color:#000000
;font-family:新細明體; color:#D23C78;text-align:center;}
#yblogtitle .thd a{width:168px;height:40px;top:-0px;position:relative;left:0px;display:block;}
#yblogtitle .thd h1 {font-size:180%;color:white;font-family:新細明體;}
color:#D23C78 顏色
text-align:center 文字圖片置中
font-size:180% 文字大小
~部落格文字置中
/*部落格文字置中*/
BODY {
Font-Family: verdana;
TEXT-ALIGN: center;}
隱藏區:
~隱藏更新日期攔
/*Blog latest update module隱藏更新日期欄*/
#ymodupdate{display:none}
~隱藏頁首和頁尾
/* 隱藏頁首和頁尾 */
#yhtw_masthead,#yhtw_mastfoot{display:none;}
~隱藏部落格相簿
/*Blog album module隱藏部落格相簿*/
#ymodalbum{display:none;}
/*隱藏搜尋欄位*/
#boxSearch{display:none;}
/*隱藏最新回應欄位*/
#boxNewComment{display:none;}
/*隱藏回應按鈕*/
div.btncomment a {display:none;}
/*隱藏回應欄位*/
#rtemodule {display:none;}
/*隱藏我的訂閱日期*/
.boxRssList1 .side{visibility:hidden;font-size: opt;}
.boxRssList1 .side span{visibility:visible;font-size:small;}
/*隱藏參觀人氣欄位*/
#boxCounter{display:none;}
/*隱藏參觀人氣字樣*/
.boxCountero{display:none;}
/*隱藏參觀人氣標題*/
.boxCounter1{display:none;}
/*隱藏rss圖示*/
.syndicate{display:none;}
/*獨立顯示留言板按鈕*/
#ymodmsgbd .mhd {display:block;}
/*獨立顯示相簿按鈕*/
#ymodalbum .mhd {display:block;}
/*隱藏發文時間*/
#ypartsingle .date,#yarticle .date {display:none}
/*隱藏留言時間*/
#ymsgboard .date {display:none}
/*Profile隱藏自我介紹欄位*/
#ymodprf{display:none}
/*隱藏留言板*/
#ymsgboard {display:none;}
/*隱藏文章欄位全部文章大標題*/
.yc3pribd .mhd{display:none}
/*隱藏我要留言免受廣告干擾*/
#yblast .text a{display:none;}
*隱藏奇摩部落格網頁~頁首和頁尾欄位*/
#yhtw_masthead,#yhtw_mastfoot{display:none;}
/*隱藏奇摩部落格網頁~頁首和頁尾欄位*/
#yhtw_mastfoot{display:none;}
/*強制下方捲軸不出現*/
body{overflow-x:hidden;}
/*隱藏左右欄位標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}
.yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:0)}
/*隱藏文章欄位標題*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{zoom:1;filter:alpha(opacity:0)}
★ Blog 語 法 大 解 析 ★
★ Blog 語 法 大 解 析 ★
隱藏yahoo!Logo
/* 隱藏頁首和頁尾 */
#yhtw_masthead,#yhtw_mastfoot{display:none;}
CSS圖檔加框
一般圖檔連結的樣子
語法:<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;}裡輸入微軟預設的滑鼠樣式即可。
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是所有文章和更多回應圖檔
請參考以下網址:http://lyc007sos.googlepages.com/e
電腦族坐姿不良 後頸、肩胛部位痛不停
電腦族坐姿不良 後頸、肩胛部位痛不停
自由時報 2008/05/17
文.. 護理師賴意櫻
腰痠背痛、肩膀僵硬不適已經不是老年人的專利,讓現代人離不
開的電腦就是造成電腦族產生「上背型」痠痛的主因,通常因為
坐姿不良、長時間重複相同動作,造成肩頸痠痛,甚至因為長時
間敲鍵盤、使用滑鼠等動作,造成「肌筋膜症候群」,這類疼痛
大多持續很長一段時間,已經屬於慢性疼痛,不僅困擾人,更可
能影響工作情緒與效率,對上班族造成很大的威脅。
一般而言,不正常的姿勢如:頸部過度前伸、不自覺聳肩、背部
前傾或駝背、手肘懸空、腿部過度壓迫或腳跟懸空;在操作電腦
時,習慣性將頭頸向前伸,會影響到脊椎的平衡穩定性,不但容
易讓脊椎扭曲,更會使肩頸部位肌肉過度用力拉扯,造成慢性肌
肉拉傷,因此痠痛部位在後頸部與兩側肩胛附近最為常見。
◎預防及解決之道,在硬體環境方面:
●改換較大的電腦螢幕:避免因看不清楚而讓身體不自主往前傾。
●電腦螢幕位置及高度應保持適中:電腦應放置在身體的正中
央,避免身體長時間扭轉而造成傷害;視線以在螢幕上方邊緣為
適當,減少頸部因低頭或抬頭受到壓迫。
◎預防及解決之道,在姿勢方面:
●注意椅背的斜度,在椅背放上一個靠墊支撐腰部,保持膝蓋與
臀部同高,兩腳能平踩地面為宜。
●敲鍵盤或使用滑鼠時,腕部放上支撐墊、減輕負擔。
●如已發生腰痠背痛的情形,可以先熱敷痠痛部位,但是當有頸
部問題時,不要隨便整脊,以免造成更嚴重的後遺症。
◎在預防運動方面:
●聳起肩膀維持6秒,放下肩膀,並使肩膀往後下方夾緊,重複5
次。
●頭緩慢轉向左方到底,停住10秒鐘,回到正中,休息三秒,轉
向右方,兩邊各重複10次。
●肩胛伸展:雙手手指交叉後,掌心向外,並將手臂伸直,儘可
能往前伸展,姿勢維持20秒後放鬆,休息20秒後再做,做15次。
當現在生活或工作都離不開電腦的環境下,最好還是工作一小時
後休息5至10分鐘,並做些簡單的肩頸運動,減少造成腰痠背痛,
也讓工作更有效率。