網頁設計中典型的header代碼結構

2024-07-11 08:25:04

字體：大中小

來源：轉載

供稿：網友

頁面中header部分一般位于最上端（有時根據需要也會位于某一側，不管它在頁面中的位置如何，在XHTML代碼中它總是優于其它元素先加載），內容主要包括網站名稱（Logo，次級標題可能是網站的一句口號等）和網站的導航部分。在推行Web標準的現代網絡中，Web中對于header的代碼結構似乎已經趨于穩定化。下面是一個典型的header代碼結構：
<div id="header">
<h1>dudo 博客</h1>
<ul>
<li>首頁</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
</ul>
</div>
這段代碼我們可以通過添加CSS代碼來實現多種布局樣式。
之所以說是典型的布局方式，因為它既夠簡潔又有語義。<h1></h1>說明了標簽內容在頁面中的作用和重要層次，<ul>、<li>無序列表列出了站內的所有主要內容分類，并通過<li>標簽說明它們是同級相鄰的，等等，諸如此類。查看更多本站CSS教程。
但是我們要考慮考慮。導航（也就是我們的menu）在頁面應該處于什么樣的位置呢？和普通文本相比，它們肯定會處于更高級的位置之上。或者這么說，導航(menu)應該和網站標題的關系更加親密一些。在我們上面的代碼結構中，我們看不出menu和<h>之間的關系來，或者說這些<ul>、<li>標簽與<h1>的關系和footer中的<ul>、<li>與<h1>的關系沒有任何區別。
因此我們要換一個方式來表達這個語義。我們很容易就會想到使用<dl>、<dt>、<dd>。<dl>來定義一個列表，<dt><dd>說明附屬關系。因此上面的header部分我們可以這樣來寫：
<div id="header">
<dl>
<dt>dudo 博客</dt>
<dd>首頁</dd>
<dd>CSS</dd>
<dd>XHTML</dd>
<dd>JavaScript</dd>
</dl>
</div>
如果你還有其它的內容要在header中出現，則可以配合<ul>、<li>一起使用：
<div id="header">
<dl>
<dt>dudo 博客</dt>
<dd id="siteMenu">
<ul>
<li>首頁</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
</ul>
</dd>
<dd id="userMenu">
<ul>
<li>加入收藏</li>
<li>設為首頁</li>
<li>Engling Version</div>
</ul>
</dd>
</dl>
</div>
這段代碼似乎更加飽滿一點。我們只從代碼就能看出標題與導航的關系，就是<dt>、<dl>的關系。

上一篇：CSS初學者常犯錯誤匯總

下一篇：關于CSS控制DIV水平居中問題