【部落格素材教學法】紫蘿琳製【冰琦女瑯】動畫框《紅色系列》＠☆★風吹向落葉。隨風飄落的楓葉。學習的園地-落葉之楓的新聞台★☆

2008-01-23 18:51:52 | 人氣10| 回應0 | 上一篇 | 下一篇

【部落格素材教學法】紫蘿琳製【冰琦女瑯】動畫框《紅色系列》

推薦 0 收藏 0 轉貼0 訂閱站台

紫蘿琳製【冰琦女瑯】動畫框《紅色系列》

框線示範圖↓

框線語法

/*Shared rounded corner for all modules 紫蘿琳製【冰琦女瑯】動畫框《紅色系列》*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk153xu0.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk253xu0.gif) right top no-repeat;height:51px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk353xu0.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk453xu0.gif) right bottom no-repeat;height:33px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:7px;background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk553xu0.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:7px;background:url(http://kiss2008.t35.com/caroline985/Bng-ttmqk653xu0.gif) 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(圖檔左上01網址) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(圖檔右上02網址) right top no-repeat;height:左右上第一.二框尺寸px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(圖檔左下03網址) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(圖檔右下04網址) right bottom no-repeat;height:左右下三.四框尺寸px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:左五框尺寸px;background:url(圖檔左中05網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:右六框尺寸px;background:url(圖檔右中06網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

使用在 (自訂樣式 )

進入 ( 管理部落格 ) 按 ( 面板設定 )

在按 ( 自訂樣式 )

貼上複製的 ( 語法 )

最後步驟，按下儲存就完成囉!

紅色部分→圖檔網址→圖檔尺寸