[站长必备] [经验] 默认风格顶部、尾部蓝条和顶部菜单栏等修改教程

本主题由阳光雨露掌门于 2007-12-13 14:46 移动

阳光雨露掌门

管理员

Rank: 80

社长

UID: 1
帖子: 982
精华: 7
积分: 8521
威望: 941 点
金钱: 930 钱
鲜花: 958 朵
支持率: 958 点
魅力: 938 点
文采: 885 点
名誉: 876 点
文学社币: 0 枚
阅读权限: 255
性别: 女
来自: 河北廊坊
在线时间: 220 小时
注册时间: 2007-11-10
最后登录: 2008-1-20

1^# 大中小发表于 2007-12-9 21:52 只看该作者

[经验] 默认风格顶部、尾部蓝条和顶部菜单栏等修改教程

默认风格顶部、尾部蓝条和顶部菜单栏等修改教程引用:

前面的话：今天（07-5-21）我用百度搜了一下该标题，发现已有网站收录，内容和我写的一样，但是作者却是别人了。请尊重我的劳动成果，要收录请写明复制内容到剪贴板代码:转自http://www.discuz.net 作者：SONOCC

***********************************************

尚有本人写的另一篇教程，欢迎指教：

《Discuz顶部菜单栏的修改方法（教程）》

***********************************************

看到网上总有人询问默认风格的顶部蓝线条、尾部蓝线条和顶部菜单栏的删除或修改宽度、高度等，尾部信息链接区的宽度修改。今天给大家做一个5.50默认版本的修改教程。欢迎指正！！
一、顶部和尾部蓝条：
1、位置见图示意：

~mainborder.gif (5.36 KB)
2007-5-18 04:14

2、修改方法：在templates/default中的css.htm内找复制内容到剪贴板代码:.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
}
I、修改线条的高度（也就是厚度）：修改height: 8px值；
II、修改线条颜色：background-color: {MAINBORDER};如果想不显示有色线条则可用页面背景色{bgcode}取代；
III、调整线条宽度：将复制内容到剪贴板代码:.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
}
改为复制内容到剪贴板代码:.mainborder {
clear: both;
height: 8px;
font-size: 0px;
line-height: 0px;
padding: 0px;
background-color: {MAINBORDER};
width:{MAINTABLEWIDTH};
}
其中{MAINTABLEWIDTH}可以视需要进行调整
3、删除这条蓝线的方法：
通过II修改线条颜色的方法，是可以将此线条看不出显示，但显示会留下一个空白。彻底删除可以在header.htm内找到复制内容到剪贴板代码:<div class="mainborder"></div>
将其删除。

二、顶部菜单栏：
1、位置见图示意：
为了让大家能清楚地了解顶部菜单栏，我将颜色改了一下。

line.jpg (19.36 KB)
2007-5-18 07:04

红色是原来的顶部蓝线条。绿色是由于改变css.htm的mainheader配色才出现，原默认风格配色很浅不易发现。在header.htm中从<div class="mainheader">到倒数第二行的</div>一直控制着从顶部绿线到底部绿线。因此css.htm中的mainheader是控制这个区的关键。
2、修改方法：在templates/default中的css.htm内找复制内容到剪贴板代码:.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
}
I、修改三条绿色线的颜色： background-color: {ALTBG1};绿色我是用了默认风格的{CALENDARTODAY}取代了{ALTBG1};
II、将padding: 6px 0px改成padding: 0px 0px;或取消这句话，将使顶部和底部的绿色线条消失，如要使中间的绿色线条消失，则找css.htm中的复制内容到剪贴板代码:.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
删除margin-top: 6px;即可
III、调整这个区域的宽度：将复制内容到剪贴板代码:.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
}
改为复制内容到剪贴板代码:.mainheader {
background-color: {ALTBG1};
padding: 6px 0px;
width:{MAINTABLEWIDTH};
}
其中{MAINTABLEWIDTH}可以视需要进行调整
3、删除这三条绿色线的方法：
通过II修改线条颜色的方法，是可以将其线条看不出显示。但还可以有另外的方法彻底删除。可以在header.htm内找到复制内容到剪贴板代码:<div class="mainheader">
和底部最后一个</div>删除即可。注意这时该区域的宽度调整要在css.htm的复制内容到剪贴板代码:.logo {
{BGCODE};
}
和复制内容到剪贴板代码:.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
分别加上width:{MAINTABLEWIDTH};即可。其中{MAINTABLEWIDTH}可以视需要进行调整

谈谈5.0和5.5在该处的不同
1、5.0的三条线（图中绿色线）是采用三条同样的<div class="headerline" style="height: 6px"></div>语句获得，在css中有一条关于headerline定义。因此要删除三条线，可以将三处<div class="headerline" style="height: 6px"></div>语句删除即可。

~headerline.gif (5.2 KB)
2007-5-18 07:18

2、5.5的三条线的实现方式非常独特。它取消了css中的headerline定义，也没有<div class="headerline" style="height: 6px"></div>语句。它是通过header.htm中<div class="mainheader">调用css.htm中的
复制内容到剪贴板代码:.mainheader {
background-color: {CALENDARTODAY};
padding: 6px 0px;
}
使得出来上下内边距6px，从而露出6px高的上下两个背景色线条。中间的线条是通过header.htm中<div class="menu"><div class="maintable">调用css.htm中的
复制内容到剪贴板代码:.menu {
{HEADERMENUBGCODE};
height: 30px;
margin-top: 6px;
}
实现的,也是自然通过顶部外边距6px,导致出现露出6px背景色的线条。
看上去是三个线条，但严格意义上讲它不是线条，只是露出的背景色而已。因此前面说的将“padding: 6px 0px改成padding: 0px 0px;或取消这句话，将使顶部和底部的绿色线条消失”，而没有敢说是删除，大家也就理解了吧！！
因此，可以看出来，该处同样实现了一样的效果，但5.5比5.0简化了一些语句，实现的手段令人拍案叫绝，有一斑而观全貌，5.5确实比5.0简化不少语句，令速度加快！！！

三、尾部：
尾部蓝色线条已在1楼阐述了。该部分只有两个：Top上的细线和信息链接区。
位置见图示意：

top.jpg (5.8 KB)
2007-5-18 08:03

1、Top上的细线：
I、修改方法：在templates/default中的css.htm内找复制内容到剪贴板代码:.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
}
可以修改相关数据

II、调整线条宽度：将复制内容到剪贴板代码:.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
}
改为复制内容到剪贴板代码:.footerline {
height: 6px;
border-bottom: 1px solid {BORDERCOLOR};
width:{MAINTABLEWIDTH};
}
其中{MAINTABLEWIDTH}可以视需要进行调整

III、删除这条线的方法：
彻底删除可以在footer.htm内找到复制内容到剪贴板代码:<div class="footerline"><div><a href="#top"><img border="0" src="{IMGDIR}/footer_top.gif" alt="" /></a></div></div>
改为复制内容到剪贴板代码:<div><a href="#top"><img border="0" src="{IMGDIR}/footer_top.gif" alt="" /></a></div>
2、信息链接区：
就是top上的细线和尾部蓝色线条之间的区域。
I、该区域宽度调整：将footer.htm 复制内容到剪贴板代码:<table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">
中的width="100%" 根据情况进行修改！
II、该区域背景色调整：将footer.htm 复制内容到剪贴板代码:<table cellspacing="0" cellpadding="0" border="0" width="100%" class="altbg1" style="padding: 5px 0px;">
中的class="altbg1"根据需要进行修改！或在后台调整｛altbg1｝配色等

注意：修改了css.htm后最好进行更新css缓存!!

总算写完了，不足之处敬请指正！！

网络文学互动社区
http://lianlian.5d6d.com
欢迎您的加盟，这里是文学爱好者的家园！！

TOP

‹‹ 上一主题 | 下一主题 ››