阿盛網站-網頁素材-裝潢美化部落格(美化欄位的框框圖)

裝潢部落格

‧阿盛編製

【圖框分配位置】：

圖片1		圖片2
圖片5	欄位內容	圖片6
圖片3		圖片4

【美化欄位的框框圖 001】

CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:45px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:9px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:8px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:9px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 002】

CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:15px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 003】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:20px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:4px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:4px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 004】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:37px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:4px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:4px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 005】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:37px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:15px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 006】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:22px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:22px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:8px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:8px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 007】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:42px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:7px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 008】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:16px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:12px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:13px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 009】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:18px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:18px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:20px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:20px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 010】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:15px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:30px;font-size:0;position:relative;right:-15px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:15px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:32px;font-size:0;position:relative;right:-15px;} .ycntmod .rcl {padding-left:24px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:29px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 011】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:42px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:7px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 012】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:29px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:9px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:5px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:5px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 013】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:15px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 014】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:15px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:48px;font-size:0;position:relative;right:-15px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:15px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:6px;font-size:0;position:relative;right:-15px;} .ycntmod .rcl {padding-left:12px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:12px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【美化欄位的框框圖 015】
CSS樣式語法↓

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(圖片網址1) left top no-repeat;margin-right:10px;} .ycntmod .rctop div {background:url(圖片網址2) right top no-repeat;height:21px;font-size:0;position:relative;right:-10px;} .ycntmod .rcbtm {zoom:1;background:url(圖片網址3) left bottom no-repeat;margin-right:10px;} .ycntmod .rcbtm div {background:url(圖片網址4) right bottom no-repeat;height:50px;font-size:0;position:relative;right:-6px;} .ycntmod .rcl {padding-left:7px;background:url(圖片網址5) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url(圖片網址6) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【補充說明】：

1.由於每個欄位框的組合圖片間隙都不同，因此請搭配「樣本圖」右邊的CSS下載。

2.本站有提供欄位框的《圖片下載》，您可多加利用。