CSS高級(jí)布局已逐漸流行，但面對(duì)所謂DIV+CSS布局的叫法讓人更為擔(dān)心，不要讓DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，活用HTML為我們提供的標(biāo)簽吧。

什么時(shí)候應(yīng)該用DIV?

雖然在這方面沒(méi)有什么硬性的規(guī)定,但個(gè)人認(rèn)為DIV更適用于大體框架的定位.例如我們要定義一塊頭部的區(qū)域,一般會(huì)這樣定義一個(gè)DIV:

<div id="header">這里就是頭部框架里要寫(xiě)的內(nèi)容</div>

當(dāng)然,可以用class來(lái)定義,但一般來(lái)講如不是在同一頁(yè)面會(huì)重復(fù)的元素,用id能更好的區(qū)別開(kāi)來(lái).

本人觀察了下alistapart的首頁(yè)代碼,它的頭部定義代碼如下:

以下是引用片段：
  <ul id="navbar"> 
  <li id="articles"> 
  <a href="/articles/" title="Articles">Articles</a></li> 
  <li id="topics"> 
  <a href="/topics/" title="Topics">Topics</a></li> 
  <li id="about"> 
  <a href="/about/" title="About">About</a></li> 
  <li id="contact"> 
  <a href="/contact/" title="Contact">Contact</a></li> 
  <li id="contribute"> 
  <a href="/contribute/" title="Contribute">Contribute</a></li> 
  <li id="feed"> 
  <a href="/feed/" title="Feed">Feed</a></li> 
  </ul> 
  <h1 id="masthead"> 
  <a href="/"> 
  <img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /> 
  </a> 
  </h1>

  
以下是引用片段：
<div id="ish"> 
<a href="/issues/214" title="Issue 214">No. <em>214</em></a> 
</div>

效果可訪問(wèn):ALA
定義了最上面的導(dǎo)航(ul部分),左邊的大logo和那個(gè)圓圓的No.xxxx的標(biāo)記.

他沒(méi)有使用DIV來(lái)做頂部的框架,但卻很好的說(shuō)明了這些代碼的用途,為什么?因?yàn)樗钣昧薍TML提供的標(biāo)簽,以及樣式名稱的定義

其它最常用的布局標(biāo)簽

h1

這個(gè)標(biāo)簽或許真正會(huì)去用的人很少,因?yàn)樗@示的

ul

這個(gè)標(biāo)簽很多情況是用來(lái)定義導(dǎo)航部分的,當(dāng)然也可以用ol來(lái)代替,但導(dǎo)航連接沒(méi)有什么順序之分吧,所以還是用ul來(lái)的比較確切(去掉CSS后效果更明顯)

b

這個(gè)已經(jīng)不再推薦使用的標(biāo)簽,在布局上卻能帶來(lái)不少的方便(因?yàn)槎?,雖然我不是太贊成使用這個(gè)標(biāo)簽,但有些時(shí)候(比如細(xì)小地方的布局定義)還是不錯(cuò)的選擇

h2

h2使用最多的地方應(yīng)該不是布局上,而是副標(biāo)題,但有些地方需要定義欄目樣式的話,用這個(gè)標(biāo)簽比較合適,欄目?jī)?nèi)容就使用p