编辑“Discuz:Discuz!6.0头部模板header详解”

{{Discuz! 6.0 top}}
<div style="clear:both;"></div>
<p style="text-indent:2em;">Header.[[htm]]主要包括两部分，一个是[[logo]]部分，一个是menu部分。</p>
<h4 style="color:#0954a6;">一、首先我们来看logo部分：</h4>
<p style="text-indent:2em;">这个部分包含在header这个[[div]]里边：</p>
<pre style="border:1px solid #000; width:688px;">
<div id="header">
<h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2>
<div id="ad_headerbanner"></div>
</div>
</pre>
<p style="text-indent:2em;">Header由两部分组成，一个是logo，以左浮动的方式表现在左边，另一个是头部的通栏广告，以右浮动的方式展现在头部的右边。大家来看下这一部分的[[css]]控制：</p>
<pre style="border:1px solid #000; width:688px;">
#header { width: 100%; overflow: hidden; }
#header h2 { float: left; padding: 5px 0; }
#ad_headerbanner { float: right; margin-top: 15px; }
</pre>
<p style="text-indent:2em;">整个header的宽度为100％，超过部分设置了隐藏，而#header h2就是控制的logo部分，它设置了logo漂浮在左边，内边距上下为5px，左右为0。#ad_headerbanner设置的是右浮动，外上边距为15px。</p>
<p style="text-indent:2em;">应该有很多娱乐站或者其他特殊需求的站点，可能头部会使用一个很大的logo，可能宽度就达到了.wrap的宽度（#header包含在.wrap里边），那么此时这个logo的左浮动属性意义就不是很大了，虽然广告设置了右浮动，但是当用户开启的时候，它仍然会被挤下去的，因为一行的宽度已经不足以容纳它了。 </p>
<h4 style="color:#0954a6;">二、我们再看一下menu部分</h4>
<p style="text-indent:2em;">这部分也可以说是包含两部分把，第一部分是分栏的判断以及表现，第二部分是头部的菜单栏。我们先来看看分栏表现的css样式把：</p>
<pre style="border:1px solid #000; width:688px;">
.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); }
</pre>
<p style="text-indent:2em;">这部分其实跟#header部分类似，分栏图标，以左浮动的形式表现在左边，而菜单栏以右浮动的方式表现在右边。.frameswitch的属性设置为左浮动，高度为30px,行高30px，左内边距为10px，左边框为宽度为1px，颜色为｛TABLEBG｝。也有人问过如何去掉这个分栏图表左边的竖线怎么去掉，方法很简单，就是把这个border-left的属性去掉即可。</p>
<p style="text-indent:2em;">再来看下菜单栏的css样式：</p>
<pre  style="border:1px solid #000; width:688px;">
#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; }
</pre>
<p style="text-indent:2em;">6.0的菜单栏作出了很大的改观，加入了好多人性化的地方，最大的表现就是当前位置的指示，举个例子，当我们处在控制面板页面的时候，在菜单栏里边的控制面板这个地方的背景或者文字会表现的和其他菜单不一样，这就告诉了我们处在什么位置。而这是的表现控制是通过.current来控制的。大家看一下这个控制表现：</p>
<pre  style="border:1px solid #000; width:688px;">
#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; }
</pre>
<p style="text-indent:2em;">当显示当前位置的时候，在背景、边框以及padding边距都做了变化，方便的让人了解此时处在什么位置。</p>
<p style="text-indent:2em;">回到主菜单的介绍，#menu设置高度为31px，宽度没有设置，即是使用.wrap的宽度，在里边采用100％，边框设置为1px，背景横向平铺。而菜单部分ul，采用右浮动的方式表现在右边，内边距设置为距上4px，距右8px，距下3px。</p>
<p style="text-indent:2em;">Header.htm部分就介绍到这里，更多的东西需要你自己去研究去深入了解</p>

== 参考来源 ==
*http://faq.comsenz.com/
{{Discuz! 6.0}}
[[category:Discuz风格模板]]