先認識一下用圖的排位：
(頭尾可用任何形狀和高度的圖片)
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈左右欄位外框 (須用寬度150px的圖片)
.col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .bd,
.col-150 .rc div, .col-150 .rc_ft div,.col-150 .rc_bd div.rc_bc{background:none}
.col-150 .rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
.col-150 .rc_bd{background:url(組件中間部份及左右框) repeat-y center}
.col-150 .rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈中間欄位外框 (須用寬度600px的圖片)
.col-600 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_bd .rc_bc .bd,
.col-600 .rc div, .col-600 .rc_ft div,.col-600 .rc_bd
div.rc_bc{background:none}
.col-600 .rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
.col-600
.rc_bd{background:url(組件中間部份及左右框) repeat-y center}
.col-600
.rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
使用後如需隱藏
相關內容組件外框（如移除
相關內容組件語法正確，其外框根本不會出現）
.mod-relatives .rc_bd,.mod-relatives .rc,.mod-relatives .rc_ft
{background:none}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈使用中間欄位外框後招呼語外框回復正常 (不用修改, 請直接套用)
#blast .rc{height:5px;background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/rc_nw.gif) left bottom no-repeat;}
#blast .rc div{background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/rc_ne.gif) right bottom no-repeat;}
#blast .rc_bd{background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/rc_w.gif) repeat-y;}
#blast .rc_bd div.rc_bc{background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/rc_e.gif) right top repeat-y;}
#blast .rc_ft{height:10px;background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/blast-sw.gif) no-repeat left bottom;}
#blast .rc_ft div{background:url(http://hk.l.yimg.com/hk.yimg.com/i/blog/blast-se.gif) no-repeat right bottom;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈訂閱欄位 (依自己blog的訂閱組件位置選用寬度150px/600px的圖片)
#subscribe_highlight .rc_bd .rc_bc .hd .titlebar, #subscribe_highlight .rc_bd .rc_bc .bd,
#subscribe_highlight .rc div, #subscribe_highlight .rc_ft div,#subscribe_highlight .rc_bd
div.rc_bc{background:none}
#subscribe_highlight .rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
#subscribe_highlight .rc_bd{background:url(組件中間部份及左右框) repeat-y center}
#subscribe_highlight .rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈
blog友欄位 (依自己blog的blog友組件位置選用寬度150px/600px/760px/920px的圖片)
#friendlist_module .rc_bd .rc_bc .hd .titlebar, #friendlist_module .rc_bd .rc_bc .bd,
#friendlist_module .rc div, #friendlist_module .rc_ft div,#friendlist_module .rc_bd
div.rc_bc{background:none}
#friendlist_module .rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
#friendlist_module .rc_bd{background:url(組件中間部份及左右框) repeat-y center}
#friendlist_module .rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈三欄式最頂及最底欄位 (須用寬度920px的圖片)
.row-920 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .bd,
.row-920 .rc div, .row-920 .rc_ft div, .row-920 .rc_bd div.rc_bc{background:none}
.row-920
.rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
.row-920 .rc_bd{background:url(組件中間部份及左右框) repeat-y center}
.row-920 .rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈兩欄式最頂及最底欄位 (須用寬度760px的圖片)
.row-760 .rc_bd .rc_bc .hd .titlebar, .row-760 .rc_bd .rc_bc .bd,
.row-760 .rc div, .row-760 .rc_ft div,.row-760 .rc_bd div.rc_bc{background:none}
.row-760
.rc{background:url(組件上框)
no-repeat center;height:圖片高度px;}
.row-760 .rc_bd{background:url(組件中間部份及左右框) repeat-y center}
.row-760 .rc_ft{background:url(組件下框) no-repeat center;height:圖片高度px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈150px寬度圖片示範
示範圖片來源: http://tw.myblog.yahoo.com/mm-18m/article?mid=10236
香港Blog語法:
.col-150 .rc div, .col-150 .rc_ft div,
.col-150 .rc_bd div.rc_bc{background:none}
.col-150 .rc{background:url(http://i326.photobucket.com/albums/k428/mm18mm18m/33-1-1.gif) no-repeat bottom;height:85px;}
.col-150 .rc_bd{background:url(http://i326.photobucket.com/albums/k428/mm18mm18m/33-2.gif) repeat-y}
.col-150 .rc_ft{background:url(http://i326.photobucket.com/albums/k428/mm18mm18m/33-3.gif) no-repeat;height:85px;}
◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈
-
檢舉
如果只想改上框, 語法係......
-
檢舉
這篇我剛重新貼上一次.
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
-
檢舉
小神仙,你的圖死晒.
檢舉
唯有盡量將d圖慢慢轉番過yahoo相簿
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
謝謝你，我又來取經 la
檢舉
-
檢舉
-
檢舉
我想要好像你個種咁..姐係「hight」 一 「hight」佢就出番黎個D..有冇!?吾該哂
-
檢舉
我個Blog好簡陋............
-
檢舉
你可唔可以教我 Blog的裝飾?可唔可以直接講?
檢舉
我這篇網誌是教弄組件框, 其他問題我都沒有出過教學, 亦決不會私下解答
-
檢舉
Woooooo~ it is super beautiful! Thanks!
檢舉
-
檢舉
檢舉
d框冇問題, 你有冇刪除果兩句?
-
檢舉
檢舉
刪除呢兩句語法：
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
Then?thank you v.much!
-
檢舉
倒數之後click邊道?
-
檢舉
咁download咗之後點呀?
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
檢舉
我自己用ulead gif animator
-
檢舉
檢舉
吾好啦
-
檢舉
檢舉
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
檢舉
ok
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
-
檢舉
拎左啦..正
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
乜佢整張咁無美感相比你.你又送左d乜比佢?
檢舉
我乜都冇送過比佢，不過佢屈我送左好多野比佢
-
檢舉
開農埸呀 咁多雞ge
檢舉
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
檢舉
我整框時都是改埋風格，但搵吾到啱用的background所以自己攞d圖來加工 
-
私人回應
檢舉
這是私人回應
檢舉
這是私人回覆
-
檢舉
好有用，多謝！！！
-
檢舉
終於可以學到用呢個css喇 ! 好多謝你既分享呀 
-
檢舉
用左你個方法個卜load得快左呀
檢舉
區區用一個招呼語來招呼佢啫
-
檢舉
整D識郁既雞啦.復活節啱用喎
檢舉
吾係咁鍾意用GIF，d圖片色彩好差，同埋個網load得好慢
-
檢舉
呢篇好正呀
檢舉
成日想整banner不過冇乜諗頭，是但搵d雞放落去囉
-
私人回應
檢舉
這是私人回應
下50個M茵。 2009-11-01 17:41
Rose 2009-09-13 18:32
阿靜 2009-08-01 09:05
ಇ;小神仙2009-08-01 11:27
大笨象 2009-07-06 10:04
ಇ;小神仙2009-07-06 14:02
小娃子 2009-06-22 11:04
唔該晒你呀
4Y`烏瑩*supp0rt angel street n0.23x支持原創小說×支持天使23 2009-06-18 21:06
小甘 2009-06-18 16:49
我唔明[150px]圖片那裏,教吓我.....小神仙......
小甘 2009-06-18 11:01
;小神仙2009-06-18 16:16
Abea 2009-06-16 12:32
;小神仙2009-06-16 16:41
廸廸仔 2009-05-16 17:42
我又再試過... 將d框改番150px.... 但仲有d欄位有問題.... 點解呢??
Revised Code :
.col-150 .rc_ft div, .col-150 .rc_bd div.rc_bc, .col-150 .rc div,
.col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .bd,
.col-150 .rc_bd .rc_bc .hd .titlebar .hd{background:none;}
.col-150 .rc{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1H-AMD.jpg) no-repeat bottom;height:85px;}
.col-150 .rc_bd{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1M-AMD.jpg) repeat-y;}
.col-150 .rc_ft{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1B-AMD.jpg) no-repeat;height:85px;}
;小神仙2009-05-16 17:45
廸廸仔 2009-05-16 17:23
請問一下... 點解我整完出黎.... 只得上面同下面... 中間會Show唔到既... 有d "中間全透明無框"... "有d 只show左邊"... 麻煩你可以幫我睇一下語法有問題嗎.... thank you
.col-150 .rc_ft div, .col-150 .rc_bd div.rc_bc, .col-150 .rc div,
.col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .bd,
.col-150 .rc_bd .rc_bc .hd .titlebar .hd{background:none;}
.col-150 .rc{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1H.jpg) no-repeat bottom;height:85px;}
.col-150 .rc_bd{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1M.jpg) repeat-y;}
.col-150 .rc_ft{background:url(http://i525.photobucket.com/albums/cc332/JudyYee/Fm%20Others/BD-1B.jpg) no-repeat;height:85px;}
;小神仙2009-05-16 17:40
#profile_highlight .bd{BACKGROUND:#FFFFFF url(http://i525.photobucket.com/albums/cc332/JudyYee/JANUMJ-Background/dye_an_0131.gif) fixed 50% 30%;}
.col-150 .rc_bd .rc_bc .bd{BACKGROUND:#FFFFFF url(http://i525.photobucket.com/albums/cc332/JudyYee/JANUMJ-Background/dye_sq_0494.gif);}
小S!u"讌"Y!n子Ch! 2009-04-17 19:16
小S!u"讌"Y!n子Ch! 2009-04-17 18:50
小S!u"讌"Y!n子Ch! 2009-04-16 18:15
小S!u"讌"Y!n子Ch! 2009-04-11 12:44
唔好意思又要麻煩你!
想問點樣cut圖?
;小神仙2009-04-11 13:04
http://www.4shared.com/file/28636808/946ad4f4/GIF5.html
小S!u"讌"Y!n子Ch! 2009-04-10 15:56
sorry,我眼都花了,幫我試試好嗎?
這幅圖okay?
;小神仙2009-04-10 16:10
你將佢cut開三份 (組件上框、組件中間部份及左右框、組件下框) 再upload
先用呢個語法將左右欄位變成透明
.col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .bd {background:none}
然後用呢個語法
.col-150 .rc div, .col-150 .rc_ft div,.col-150 .rc_bd div.rc_bc{background:none}
.col-150 .rc{background:url(組件上框) no-repeat bottom;height:圖片高度px;}
.col-150 .rc_bd{background:url(組件中間部份及左右框) repeat-y}
.col-150 .rc_ft{background:url(組件下框) no-repeat;height:圖片高度px;}
LeeDeeLive-小min 2009-04-10 02:07
hahaha 因為copy錯左=.=" thank you你~我會睇下你條link個教學!!
我會俾心機的!!
;小神仙2009-04-10 16:10
Nata佩''lie 2009-03-31 16:00
hello!
要消化吓
^ ^
引用
;小神仙2009-03-31 18:13
佩''^ ^ 2009-03-28 18:35
謝謝哦
藍大淑 2009-03-26 21:50
慧 2009-03-24 23:37
小神仙♪2009-03-24 23:41
波波 2009-03-24 21:30
小神仙♪2009-03-24 23:14
誰能明白我 2009-03-24 17:50
Me祝願你天天都幸福快樂&健康都與你常在 ~~~
Good luck for you ~~~
ROSE 2009-03-24 11:59
整好咗啦,你比D意見我啦~
我整個blog的風格亦巳改埋, 所以我要引用這篇教學, 讓更多人認識這種設置.
小神仙♪2009-03-24 13:14
小肥豬 2009-03-24 10:06
Ada 2009-03-24 01:25
慧 2009-03-24 00:29
你用招呼語框,係到招呼緊某人呀.
小神仙♪2009-03-24 12:35
你睇佢用乜野招呼我
(按圖放大)
慧 2009-03-23 22:37
小神仙♪2009-03-23 22:45
慧 2009-03-23 22:31
點解你個卜多左咁多雞架
小神仙♪2009-03-23 22:34