- 您的當(dāng)前位置： 網(wǎng)站首頁 ? 服務(wù)支持 ? 常見問題 ? 成品網(wǎng)站 ? 怎樣制作插件邊框模版
- ***
| 問： | 怎樣制作插件邊框模版 |
| 答： |
邊框模版分為插件邊框模版和標(biāo)簽邊框模版兩大類。本文介紹插件邊框模版的DIY制作。 插件邊框模版是在插件設(shè)置時(shí)可以選擇“套”在插件外面的標(biāo)題欄、邊線、背景的模版。插件邊框和插件內(nèi)容是分離的，插件可以選擇組合不同的邊框模版來獲得不同的效果。 插件邊框模版又分為可選顏色和不可選顏色兩種，其中可選顏色邊框，每套邊框模版需制作16種配色，一般由官方開發(fā)提供。而用戶DIY制作時(shí)，只需要制作適合自己網(wǎng)站風(fēng)格的邊框，即不可選顏色邊框。不可選顏色插件邊框的編號(hào)范圍是500-999，邊框的編號(hào)和目錄名對(duì)應(yīng)，存放在base/border/目錄下，每個(gè)目錄一套邊框。 插件邊框模版由一個(gè)tpl.htm文件和圖片組成，圖片放在邊框目錄下的images子目錄，樣式可以使用內(nèi)聯(lián)樣式，也可以將外聯(lián)樣式表放在images子目錄。由于邊框模版必須適合PHPWEB的DIV絕對(duì)定位、可隨插件尺寸變化、排版拉動(dòng)邊框時(shí)邊線跟隨鼠標(biāo)移動(dòng)、適合可變高度和不可變高度等要求，因此插件邊框的制作必須遵循以下規(guī)則（請別擔(dān)心這些規(guī)則，你只要照著現(xiàn)有的模版做就是了）： 1、將邊框的開始部分放在<!-start-><!-start->標(biāo)簽之間，結(jié)束部分放在<!-end-><!-end->標(biāo)簽之間 2、邊框模版必須使用div，最外面一層div的class定義為pdv_border，以使程序識(shí)別它是邊框?qū)舆M(jìn)行處理。 3、邊框最外面一層DIV的樣式必須定義border、margin、padding的值，包括0px的情況，程序需要?jiǎng)討B(tài)獲取其樣式值以計(jì)算實(shí)際顯示高度，保證底線不被插件覆蓋。 4、如果最外面一層定義了border，那么高度應(yīng)該作height:100%的定義，保證底邊線跟著插件尺寸走。 5、如果是圓角，可以用margin的負(fù)值配合圖片實(shí)現(xiàn)。 6、邊框模版最里面的層（也就是直接包在插件內(nèi)容外面的那一層），需加入{ #padding# }標(biāo)簽，就是插件設(shè)置時(shí)的內(nèi)邊距。 7、更多鏈接用{ #morelink # }標(biāo)簽，更多鏈接得“更多”字樣（或圖片），需要被包在一個(gè)層內(nèi)，這這層需定義樣式display:{ #showmore# }，這樣當(dāng)沒有更多鏈接時(shí)，可以隱藏更多鏈接 以下介紹一些典型的插件邊框養(yǎng)例： 樣例一：普通邊框線+標(biāo)題欄（如：502號(hào)邊框） <!-start-> <div class="pdv_border" style="border:1px #cfcfcf solid;background:#fff;padding:0px;margin:0px;height:100%"> <div style="background:url(images/top.png) repeat-x;height:28px;border-bottom:1px #cfcfcf solid"> <div style="float:left;background:url(images/li.gif) 12px no-repeat;padding-left:26px;color:#555;text-align:left;font:12px/28px simsun;">{ #coltitle# }</div> <div style="float:right;margin-right:8px"> <a href="{ #morelink# }" style="font:12px/26px simsun;color:#555;display:{ #showmore# }">更多>></a> </div> </div> <div style="padding:{ #padding# }px"> <!-start-> <!-end-> </div> </div> <!-end-> 樣例二：圓角邊框+標(biāo)題欄（如：501號(hào)邊框） <!-start-> <div class="pdv_border" style="border:0px;height:100%;padding:0;margin:0;background:url(images/bg.gif) repeat-y"> <div style="height:100%;background:url(images/bg1.gif) right repeat-y"> <div style="height:38px;background:url(images/top.gif) left no-repeat"> <div style="float:left;background:url(images/l.gif) 12px no-repeat;font:bold 14px/40px Arial;text-align:left;padding-left:35px;color:#333;"> { #coltitle# } </div> <div style="float:right;width:50px;height:38px;text-align:right;background:url(images/top.gif) -750px no-repeat"> <a href="{ #morelink# }" style="font:12px/36px simsun;color:#333;margin-right:12px;display:{ #showmore# }">更多>></a> </div> </div> <div style="margin:0px 3px;padding:{ #padding# }px"> <!-start-> <!-end-> </div> </div> </div> <div style="margin-top:-13px;height:13px;line-height:13px;background:url(images/bt.gif) left no-repeat"> </div> <div style="float:right;margin-top:-13px;width:10px;height:13px;line-height:13px;background:url(images/bt.gif) -790px no-repeat"> </div> <!-end-> 注意事項(xiàng)：圓角邊框多用到float，為兼容IE6，必須加入line-height，否則div的高度會(huì)被默認(rèn)顯示為12px，導(dǎo)致顯示問題。 樣例三：固定高度無標(biāo)題欄邊框模版（如：500號(hào)邊框） <!-start-> <div class="pdv_border" style="border:1px #ddd solid;background:url(images/top.png) repeat-x;padding:{ #padding# }px;margin:0px;height:28px"> <!-start-> <!-end-> </div> <!-end-> 插件邊框制作完成后，將其上傳到base/border/目錄； 然后登錄后臺(tái)管理系統(tǒng)，選擇模塊插件管理，從基礎(chǔ)模塊后面的“邊框管理”按鈕進(jìn)入； 在邊框管理界面的右上角，填寫邊框編號(hào)和邊框描述，添加邊框 添加完成后，就可以在插件設(shè)置時(shí)選擇使用新的邊框模版了 秦皇島炎黃科技網(wǎng)絡(luò)工作室 為您提供優(yōu)質(zhì)的 秦皇島成品網(wǎng)站 秦皇島網(wǎng)站制作 秦皇島網(wǎng)站建設(shè)服務(wù) |
| 問題沒解決？ 在線咨詢 或致電：13785936100 |
致電 137 859 36100
7×24小時(shí)服務(wù)熱線
