请选择 进入手机版 | 继续访问电脑版

博思互联建站网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

50元买空间送源码包安装 50元买1年美国空间送本站任意一款源码 快速赚取金币| 免费加入VIP

港台体验150M空间 免费备案港台空间 美国空间 com域名只需55元| pw域名38元

友情链接自助申请 - 博思建站网论坛广告位 博思建站网论坛广告位 - 博思建站网论坛广告位 博思建站网论坛 Archiver |论坛日志 | 论坛相册

搜索
热搜: 推广 免费 空间
论坛长期招聘版主 论坛专用2G双线主机,386元/年 韩国超速1G主机,免备案198元/年 精英1.2G国内外可选-特价198元/年
双线20人合租-20G仅698元/年 11G 国内外论坛专用主机126元/月 500M韩国免备案爆快 126元/年 500M国内双线主机快 126元/年
文字广告位招租 80元/月 文字广告位招租 80元/月 文字广告位招租 80元/月 文字广告位招租 80元/月
查看: 692|回复: 0

phpweb怎样制作插件边框模版

[复制链接]
发表于 2016-1-12 13:23:04 | 显示全部楼层 |阅读模式

本站源码安装服务:虚拟主机安装20元   win服务器安装30元   如果是买的本站源码,虚拟主机安装只需要15元

边框模版分为插件边框模版和标签边框模版两大类。本文介绍插件边框模版的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# }">更多&gt;&gt;</a>
</div>
</div>
<div style="padding:{ #padding# }px">
<!-start->
<!-end->
</div>
</div>
<!-end->
<!-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# }">更多&gt;&gt;</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">&nbsp;</div>
<div style="float:right;margin-top:-13px;width:10px;height:13px;line-height:13px;background:url(images/bt.gif) -790px no-repeat">&nbsp;</div>
<!-end->
注意事项:圆角边框多用到float,为兼容IE6,必须加入line-height,否则div的高度会被默认显示为12px,导致显示问题。

样例二:圆角边框+标题栏(如: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# }">更多&gt;&gt;</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">&nbsp;</div>
<div style="float:right;margin-top:-13px;width:10px;height:13px;line-height:13px;background:url(images/bt.gif) -790px no-repeat">&nbsp;</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/目录;

然后登录后台管理系统,选择模块插件管理,从基础模块后面的“边框管理”按钮进入;
在边框管理界面的右上角,填写边框编号和边框描述,添加边框

添加完成后,就可以在插件设置时选择使用新的边框模版了

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

a

QQ|小黑屋|手机版|Archiver|博思互联建站网 ( 蜀ICP备09002004号-1 )

GMT+8, 2024-12-15 06:13 , Processed in 0.102931 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表