Discuz! 頭部模板 header 詳解

dlalden

Discuz! 頭部模板 header 詳解Header.htm主要包括兩部分，一個是logo部分，一個是menu部分。 一、首先我們來看logo部分：這個部分包含在header這個div裡邊：

1. <div id="header">
   
2. <h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2>
   
3. <div id="ad_headerbanner"></div>
   
4. </div>

複製代碼

Header由兩部分組成，一個是logo，以左浮動的方式表現在左邊，另一個是頭部的通欄廣告，以右浮動的方式展現在頭部的右邊。
大家來看下這一部分的css控制：

1. 
   
2. #header { width: 100%; overflow: hidden; }
   
3. #header h2 { float: left; padding: 5px 0; }
   
4. #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樣式把：

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

複製代碼

這部分其實跟#header部分類似，分欄圖標，以左浮動的形式表現在左邊，而菜單欄以右浮動的方式表現在右邊。.frameswitch的屬性設置為左浮動，高度為30px,行高30px，左內邊距為10px，左邊框為寬度為1px，顏色為｛TABLEBG｝。也有人問過如何去掉這個分欄圖表左邊的豎線怎麼去掉，方法很簡單，就是把這個border-left的屬性去掉即可。
再來看下菜單欄的css樣式：

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

複製代碼

6.0的菜單欄作出了很大的改觀，加入了好多人性化的地方，最大的表現就是當前位置的指示，舉個例子，當我們處在控制面板頁面的時候，在菜單欄裡邊的控制面板這個地方的背景或者文字會表現的和其他菜單不一樣，這就告訴了我們處在什麼位置。而這是的表現控制是通過.current來控制的。大家看一下這個控制表現：

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

複製代碼

當顯示當前位置的時候，在背景、邊框以及padding邊距都做了變化，方便的讓人了解此時處在什麼位置。
回到主菜單的介紹，#menu設置高度為31px，寬度沒有設置，即是使用.wrap的寬度，在裡邊采用100％，邊框設置為1px，背景橫向平鋪。而菜單部分ul，采用右浮動的方式表現在右邊，內邊距設置為距上4px，距右8px，距下3px。
Header.htm部分就介紹到這裡，更多的東西需要你自己去研究去深入了解哦。