☆★風吹向落葉。隨風飄落的楓葉。學習的園地-落葉之楓的新聞台★☆

2008-01-23 18:48:06 落葉之楓

【部落格素材教學法】紫蘿琳製【向日草莓園】動畫框《黃綠色系列》

留言 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/Aung3r6tmmkx-e0301.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://kiss2008.t35.com/caroline985/Aung3r6tmmkx-e0302.gif) right top no-repeat;height:32px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://kiss2008.t35.com/caroline985/Aung3r6tmmkx-e0303.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://kiss2008.t35.com/caroline985/Aung3r6tmmkx-e0304.gif) right bottom no-repeat;height:31px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:16px;background:url(http://kiss2008.t35.com/caroline985/Aung3r6tmmkx-e0305.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:17px;background:url(http://kiss2008.t35.com/caroline985/Aung3r6tmmkx-e0306.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;}

使用在 (自訂樣式 )

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

在按 ( 自訂樣式 )

貼上複製的 ( 語法 )

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

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

琳的 logo 連結