琳達教學:如何自製部落格版型 進階型相框邊框
製作教學;真滴素有夠麻煩滴....
又要截圖,又要解說,每個部驟每個小動作都要講得很詳細
中間若少掉了某個小分解,就會導致後序製作的困難度了
所以囉~若你真得能在琳達教學中真正學習到如何製作
也請你告訴琳達,不但替你高興,琳達也會很有成就感的喔~
琳達專屬分線
![](http://happykao.pupu.jp/kaoani596.gif)
辛苦的製作教學,希望你能正確引用
★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處:★Linda達令★
★本站文章巳申請註作權,請尊重他人正確引用
![](http://i.creativecommons.org/l/by-nc-sa/2.5/tw/88x31.png)
領取琳達LOGO
琳達專屬分線![](http://happykao.pupu.jp/kaoani596.gif)
老實講;琳達倒是覺得相框邊框是較簡單的
祗不過是將適當的相框切割成六張圖檔,再將圖一和圖三寬度加長
來看看;琳達找到這張框圖做為範例
![](http://img177.imageshack.us/img177/6268/linda529.gif)
再來看如何切割→
![](http://img253.imageshack.us/img253/5954/linda543703.gif)
打開
![](http://hk.geocities.com/linda590902/05.bmp)
的軟體,先來製作圖示一的部份
步驟一、 開啟相框圖檔點編輯按畫布大小,將寬度設為1000以上,高度可自行調整(如圖示)
![](http://img55.imageshack.us/img55/4092/snagitlindac124.jpg)
再將此圖(圖示一)複製延伸寬度 →
![](http://img404.imageshack.us/img404/972/linda543704.gif)
製成的圖檔為→
http://img185.imageshack.us/img185/2723/lindajp7121.gif圖示二的部份 →
![](http://img294.imageshack.us/img294/8916/lindajp7122.gif)
圖示三的製作和圖示一是一樣的,將此圖 →
![](http://img404.imageshack.us/img404/9471/linda543705.gif)
延伸至所需寬度
製成的圖檔為→http://img185.imageshack.us/img185/8474/lindajp7123.gif
圖示四的部份 →
![](http://img406.imageshack.us/img406/365/lindajp7124.gif)
圖示五
![](http://img151.imageshack.us/img151/2258/lindajp7125.gif)
和圖示六
![](http://img512.imageshack.us/img512/5254/lindajp7126.gif)
的圖檔,製成之後一一將它們上傳至個人網路空間取得網址
套入以下的語法 ↓
/*隱藏橫框主標題名稱框線圖*/ #yblogtitle .rctop{background:left top no-repeat;margin-right:0px;} #yblogtitle .rctop div{background:right top no-repeat;height:20px;right:-0px;} #yblogtitle .rcl{background:repeat-y;} #yblogtitle .rcr{background:right repeat-y;} #yblogtitle .rcbtm {zoom:1;background:left bottom no-repeat;margin-right:0px;} #yblogtitle .rcbtm div {background:right bottom no-repeat;height:20px;right:-0px;}
/*Shared rounded corner for all modules by Linda*/ .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:10px;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:10px;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;}
|
語法對照註解: /*隱藏橫框主標題名稱框線圖*/是看個人需求,若標題橫框要顯示請別加上這一段語法
margin-bottom:10px 這是設定欄與欄位之間距離的數值 margin-right:5px 和 right:-5px; 設定相對應寬度的數值 height:10px 設定上下框線的高度數值 padding-left:5px;和 padding-right:5px; 是框的左右圖檔寬度的數值
|
語法範例 ↓
邊框預覽圖 ↓
![](http://img258.imageshack.us/img258/7508/no0191lindacss.jpg)
延伸相關教學圖文閱讀
第一課敎學
琳達教學:如何自製部落格版型 簡易型邊框 第二課教學
琳達教學:如何自製部落格版型 簡易型小圖邊框 第三課教學
琳達教學:如何自製部落格版型 簡易型閃圖邊框
第四課教學
琳達教學:如何自製部落格版型 進階型分線邊框![](http://www.candiecoded.com/Falling_Objects/6/mushroom.gif)