div+css布局最佳化中的整體布局

　　在div+css布局中，一般都這樣來整體構架的

<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>

　　而對於header部分，肯定要顯示網站標題，除了顯示網站標題外，還可能要顯示其他比較重要的對象，比如網站的導覽列：

<div id="header">
　<div id="title">這裡是網站的標題</div>
　<div id="nav">這裡是網站導覽列</div>
</div>

　　很多人一般都這樣寫的，當然這樣寫並沒有什麼語法錯誤。但對於div來說有個原則，那就是盡少的使用div的嵌套（和table一樣的缺點：1、對於使用者：瀏覽器要消耗資源對嵌套的關係進行解析，影響速度；2、對於搜尋：搜尋引擎對嵌套的層數可能有所限制）。而且這樣寫帶給我們的可讀性也不算太高。

　　那如何才是最佳化，最科學的寫法呢？

　　我們選用其他的Xhtml代碼來取代上面的div，那又如何選擇呢？？

　　首先標題的選擇——我們知道在xhtml中h1-h6是表示標題的，而header裡的標題在全頁來看是最重要的，我們選擇h1來表示標題是順其自然的。

　　其次導覽列的選擇——導覽列是由多個小塊內容組成，我們選擇無序列表<ul><li>來表示菜單最合適不過了！

　　最後以上的內容可以最佳化成：

<div id="header">
　　
　<h1>這裡是網站的標題</h1>
　<ul>
　　 <li>這裡是網站導覽列</li>
　　</ul>
</div>