CSS設計網頁頭部的寫法

來源:互聯網
上載者:User

在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></li></ul>

來表示菜單最合適不過了! 
最後以上的內容可以最佳化成:

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。