- 您的当前位置： 网站首页 » 服务支持 » 常见问题 » 成品网站 » 怎样制作插件边框模版
- ***
| 问： | 怎样制作插件边框模版 |
| 答： |
边框模版分为插件边框模版和标签边框模版两大类。本文介绍插件边框模版的DIY制作。 插件边框模版是在插件设置时可以选择“套”在插件外面的标题栏、边线、背景的模版。插件边框和插件内容是分离的，插件可以选择组合不同的边框模版来获得不同的效果。 插件边框模版又分为可选颜色和不可选颜色两种，其中可选颜色边框，每套边框模版需制作16种配色，一般由官方开发提供。而用户DIY制作时，只需要制作适合自己网站风格的边框，即不可选颜色边框。不可选颜色插件边框的编号范围是500-999，边框的编号和目录名对应，存放在base/border/目录下，每个目录一套边框。 插件边框模版由一个tpl.htm文件和图片组成，图片放在边框目录下的images子目录，样式可以使用内联样式，也可以将外联样式表放在images子目录。由于边框模版必须适合PHPWEB的DIV绝对定位、可随插件尺寸变化、排版拉动边框时边线跟随鼠标移动、适合可变高度和不可变高度等要求，因此插件边框的制作必须遵循以下规则（请别担心这些规则，你只要照着现有的模版做就是了）： 1、将边框的开始部分放在<!-start-><!-start->标签之间，结束部分放在<!-end-><!-end->标签之间 2、边框模版必须使用div，最外面一层div的class定义为pdv_border，以使程序识别它是边框层进行处理。 3、边框最外面一层DIV的样式必须定义border、margin、padding的值，包括0px的情况，程序需要动态获取其样式值以计算实际显示高度，保证底线不被插件覆盖。 4、如果最外面一层定义了border，那么高度应该作height:100%的定义，保证底边线跟着插件尺寸走。 5、如果是圆角，可以用margin的负值配合图片实现。 6、边框模版最里面的层（也就是直接包在插件内容外面的那一层），需加入{ #padding# }标签，就是插件设置时的内边距。 7、更多链接用{ #morelink # }标签，更多链接得“更多”字样（或图片），需要被包在一个层内，这这层需定义样式display:{ #showmore# }，这样当没有更多链接时，可以隐藏更多链接 以下介绍一些典型的插件边框养例： 样例一：普通边框线+标题栏（如：502号边框） <!-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-> 样例二：圆角边框+标题栏（如：501号边框） <!-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-> 注意事项：圆角边框多用到float，为兼容IE6，必须加入line-height，否则div的高度会被默认显示为12px，导致显示问题。 样例三：固定高度无标题栏边框模版（如：500号边框） <!-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/目录； 然后登录后台管理系统，选择模块插件管理，从基础模块后面的“边框管理”按钮进入； 在边框管理界面的右上角，填写边框编号和边框描述，添加边框 添加完成后，就可以在插件设置时选择使用新的边框模版了 秦皇岛炎黄科技网络工作室 为您提供优质的 秦皇岛成品网站 秦皇岛网站制作 秦皇岛网站建设服务 |
| 问题没解决？ 在线咨询 或致电：13785936100 |
