你现在的位置:首页 > PHP网站建设知识库 > phpcms > 正文

修改phpcms自带列表页面模板实现{catpos($catid)}位置导航的div+

/*位置导航*/
#position{ background:#E4F3FC url(images/bg_position.gif) no-repeat 0 0; padding-left:90px; height:28px; line-height:28px; border:1px solid #fff;}
#position a{ font-weight:bold; color:#077ac7; background:url(images/bg_position.gif) no-repeat right -40px; padding-right:16px;}


就是系统默认的 css文件,这段代码在 \templates\default\skins\default\base.css 文件中 大家很容易找到
下面我根据我的需求进行代码修改 首先看一下 list.html文件中的 原始调用{catpos($r['catid'])}代码
<div id="position"><a href="">首页</a>{catpos($catid)}</div>我们将整段代码 复制到 自己制作的模板,插入我的模板后显示 :这里 第一 出现了分行 第二 图片不能正常显示 第三 带有原代码的 文字及背景效果 与整站风格不统一 那么 我们再进行修改:

#position{ background:#E4F3FC url(images/bg_position.gif) no-repeat 0 0; padding-left:90px; height:28px; line-height:28px; border:1px solid #fff;}
定义 整段 <div id="position"><a href="">首页</a>{catpos($catid)}</div>代码
padding-left:90px; 表示 向右距离 90像素 显然 离我们左端太远 我们修改为 padding-left:10px; (距离 左边框10像素)
background:#E4F3FC 表示 背景颜色 这里我不需要背景 直接删除
height:28px; line-height:28px; 定义了两个 高度 我也不需要直接删除
border:1px solid #fff 表示 上下边距 1像素 先保留 最后的到得代码为
#position{ url(images/bg_position.gif) no-repeat 0 0; padding-left:10px; border:1px solid #fff;}
第二段代码:
#position a{ font-weight:bold; color:#077ac7; background:url(images/bg_position.gif) no-repeat right -40px; padding-right:16px;}
定义a 值
color:#077ac7表示字体颜色 一般我们做模板 css里面都有统一的 字体颜色定义 如果需要改成其他颜色,如果采用模板整理风格 我们可以直接删掉
right -40px 定义bg_position.gif 图片显示的 位置 也就是图片坐标 这里我们暂时 不管
padding-right:16px 定义 a 与a之间的距离为 16像素 暂时不管 那我们修改后得到的代码为
#position a{ font-weight:bold; background:url(images/bg_position.gif) no-repeat right -40px; padding-right:16px;}

我们再来看一下phpcms2008系统自带的图片 bg_position.gif

它是一个上下结构的组合图片 这个图片 一般不适合我们 自己做模板的需求 这里我为了自己模板另做个一个 gif图像。

我先换成我的图片结合以
#position a{ font-weight:bold; color:#077ac7; background:url(images/modify12.gif) no-repeat right -40px; padding-right:16px;}
#position a{ font-weight:bold; background:url(images/modify12.gif) no-repeat right -40px; padding-right:16px;}
做一下演示大家看 大部分问题解决了 但是 图片没有显示 这是因为 no-repeat right -40px 这段代码的原因
我新做的图片为 单图 我们将代码 no-repeat right -40px 改为no-repeat right 0px 后演示

看图片出来了 但是 图片与字体之间 太紧凑 感觉不规范
我们把这段代码#position a{ font-weight:bold; background:url(images/modify12.gif) no-repeat right -40px; padding-right:16px;}
加一个 padding-left:10px 即a左a右各加一段距离形成代码 #position a{ font-weight:bold; background:url(images/modify12.gif) no-repeat right -40px; padding-right:16px;padding-left:10px;}

我们最终修后的系统代码为
/*位置导航*/
#position{ url(/images/wannacry/modify12.gif) no-repeat 0 0; padding-left:10px; border:1px solid #fff;}
#position a{ font-weight:bold; background:url(/images/wannacry/modify12.gif) no-repeat right 0px; padding-right:16px;padding-left:10px;}