个人工具
名字空间
变换
操作

Discuz:Discuz!6.0头部模板header详解

来自站长百科
跳转到: 导航, 搜索

Discuz! 6.0|Discuz! 6.0安装|Discuz! 6.0使用|Discuz! 6.0风格模板|Discuz! 6.0插件|Discuz! 6.0升级|Discuz! 6.0开发|Discuz! 6.0 FAQ

Header.htm主要包括两部分,一个是logo部分,一个是menu部分。

目录

一、首先我们来看logo部分:

这个部分包含在header这个div里边:

<div id="header">
<h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2>
<div id="ad_headerbanner"></div>
</div>

Header由两部分组成,一个是logo,以左浮动的方式表现在左边,另一个是头部的通栏广告,以右浮动的方式展现在头部的右边。大家来看下这一部分的css控制:

#header { width: 100%; overflow: hidden; }
#header h2 { float: left; padding: 5px 0; }
#ad_headerbanner { float: right; margin-top: 15px; }

整个header的宽度为100%,超过部分设置了隐藏,而#header h2就是控制的logo部分,它设置了logo漂浮在左边,内边距上下为5px,左右为0。#ad_headerbanner设置的是右浮动,外上边距为15px。

应该有很多娱乐站或者其他特殊需求的站点,可能头部会使用一个很大的logo,可能宽度就达到了.wrap的宽度(#header包含在.wrap里边),那么此时这个logo的左浮动属性意义就不是很大了,虽然广告设置了右浮动,但是当用户开启的时候,它仍然会被挤下去的,因为一行的宽度已经不足以容纳它了。

二、我们再看一下menu部分

这部分也可以说是包含两部分把,第一部分是分栏的判断以及表现,第二部分是头部的菜单栏。我们先来看看分栏表现的css样式把:

.frameswitch { float: left; height: 30px; line-height: 30px;
 padding-left: 10px; border-left: 1px solid {TABLEBG}; }
#menu a.frameoff, #menu a.frameon { float: left; border: none;
 padding-left: 16px; margin-left: 0; background: no-repeat 0 50%; }
#menu a.frameoff { background-image: url({IMGDIR}/frame_off.gif); }
#menu a.frameon { background-image: url({IMGDIR}/frame_on.gif); }

这部分其实跟#header部分类似,分栏图标,以左浮动的形式表现在左边,而菜单栏以右浮动的方式表现在右边。.frameswitch的属性设置为左浮动,高度为30px,行高30px,左内边距为10px,左边框为宽度为1px,颜色为{TABLEBG}。也有人问过如何去掉这个分栏图表左边的竖线怎么去掉,方法很简单,就是把这个border-left的属性去掉即可。

再来看下菜单栏的css样式:

#menu { height: 31px; border: 1px solid {CATBORDER}; {HEADERMENUBGCODE}; 
background-repeat: repeat-x; }
#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid {TABLEBG}; }
#menu li { float: left; }
#menu li a { text-decoration: none; float: left; color: {HEADERMENUTEXT};
 padding: 4px 8px 3px; background: url({IMGDIR}/menu_itemline.gif) no-repeat 0 6px; }
#menu li.hover, #menu li.current { background-color: {BGCOLOR};
 border: 1px solid; border-color: {CATBORDER} {CATBORDER} {BGCOLOR}; }
#menu li.current { font-weight: bold; }
#menu li.hover a { padding: 3px 7px; background-image: none; }
#menu li.current a { padding: 4px 7px 3px; background-image: none; }
#menu cite a { font-weight: bold; background-image: none; }

6.0的菜单栏作出了很大的改观,加入了好多人性化的地方,最大的表现就是当前位置的指示,举个例子,当我们处在控制面板页面的时候,在菜单栏里边的控制面板这个地方的背景或者文字会表现的和其他菜单不一样,这就告诉了我们处在什么位置。而这是的表现控制是通过.current来控制的。大家看一下这个控制表现:

#menu li.hover, #menu li.current { background-color: {BGCOLOR};
 border: 1px solid; border-color: {CATBORDER} {CATBORDER} {BGCOLOR}; }
#menu li.current { font-weight: bold; }
#menu li.current a { padding: 4px 7px 3px; background-image: none; }

当显示当前位置的时候,在背景、边框以及padding边距都做了变化,方便的让人了解此时处在什么位置。

回到主菜单的介绍,#menu设置高度为31px,宽度没有设置,即是使用.wrap的宽度,在里边采用100%,边框设置为1px,背景横向平铺。而菜单部分ul,采用右浮动的方式表现在右边,内边距设置为距上4px,距右8px,距下3px。

Header.htm部分就介绍到这里,更多的东西需要你自己去研究去深入了解

参考来源

Discuz! 6.0使用手册导航

Discuz! 6.0安装:

Discuz! 6.0产品概况| Discuz! 6.0环境要求| Discuz! 6.0安装详细过程| Discuz! 6.0文件及目录结构| Discuz! 6.0安装的常见问题| 附录 如何在Discuz上安装个人空间SupeSite/x-space指南| 附录 论坛一键式安装Discuz!EXP及EasyDiscuz指南| 附录 discuz本地运行环境构建(windows)

Discuz! 6.0使用:

Discuz! 6.0日常使用| Discuz! 6.0 config.inc.php配置问题| Discuz! 6.0前台管理操作说明| Discuz! 6.0用户权限设定| Discuz! 6.0服务器相关| Discuz! 6.0后台基本设置| Discuz! 6.0后台论坛管理| Discuz! 6.0后台用户管理| Discuz! 6.0后台帖子管理| Discuz! 6.0后台扩展设置| Discuz! 6.0后台其它设置| Discuz! 6.0后台社区营销| Discuz! 6.0后台系统工具

Discuz! 6.0风格模板

Discuz!6.0风格制作| Discuz!6.0界面风格与模板定制| Discuz!6.0风格高级应用| Discuz!6.0头部模板header详解| Discuz!6.0页脚模板footer详解

Discuz! 6.0插件

Discuz!6.0插件简介| Discuz!6.0插件安装| Discuz!6.0插件列表

Discuz! 6.0升级

Discuz!6.0升级指南| Discuz!6.0阶段升级说明| Discuz!6.0版本更新记录

Discuz! 6.0开发

Discuz!6.0插件设计 | Discuz!6.0插件设置及管理| Discuz!6.0插件的钩子使用技巧| Discuz!6.0插件代码的安全规范| Discuz!6.0PassPort接口技术文档

Discuz! 6.0 FAQ

Discuz!6.0经验技巧| Discuz!6.0防御CC攻击说明| Discuz!6.0搜索引擎优化| Discuz!6.0论坛程序

留言