DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV適用場合及其他常用布局標簽
DIV適用場合及其他常用布局標簽
編輯:CSS詳解     

在學習網頁布局的過程中,你可能會遇到DIV的使用問題,這裡和大家分享一下DIV的適用場合,相信本文介紹一定會讓你有所收獲。

什麼時候應該用DIV?

雖然在這方面沒有什麼硬性的規定,但個人認為DIV更適用於大體框架的定位。例如我們要定義一塊頭部的區域,一般會這樣定義一個DIV:

這裡就是頭部框架裡要寫的內容

當然,可以用class來定義,但一般來講如不是在同一頁面會重復的元素,用id能更好的區別開來.

查看如下定義代碼

  1. <ulidulid="navbar">
  2. <liidliid="articles">
  3. Articles</li>
  4. <liidliid="topics">
  5. Topics</li>
  6. <liidliid="about">
  7. About</li>
  8. <liidliid="contact">
  9. Contact</li>
  10. <liidliid="contribute">
  11. Contribute</li>
  12. <liidliid="feed">
  13. Feed</li>
  14. </ul>
  15. <h1idh1id="masthead">
  16. <ahrefahref="/">
  17. <imgsrcimgsrc="/pix/alalogo.gif"alt="ALISTApart:ForPeopleWhoMakeWebsites"/>
  18. </h1>

No.214
定義了最上面的導航(ul部分),左邊的大logo和那個圓圓的No.xxxx的標記.
他沒有使用DIV來做頂部的框架,但卻很好的說明了這些代碼的用途,為什麼?因為他活用了Html提供的標簽,以及樣式名稱的定義

其它最常用的布局標簽

  h1
這個標簽或許真正會去用的人很少,因為它顯示的字體真的是太"大"了,但我們是CSSer,有什麼標簽樣式不能改呢?而且它所能表達的意思就如同它原先的作用一樣明顯(大標題)我想你已經知道怎麼去用它了^_^

  ul
這個標簽很多情況是用來定義導航部分的,當然也可以用ol來代替,但導航連接沒有什麼順序之分吧,所以還是用ul來的比較確切(去掉CSS後效果更明顯)

  b
這個已經不再推薦使用的標簽,在布局上卻能帶來不少的方便(因為短),雖然我不是太贊成使用這個標簽,但有些時候(比如細小地方的布局定義)還是不錯的選擇

  h2
h2使用最多的地方應該不是布局上,而是副標題,但有些地方需要定義欄目樣式的話,用這個標簽比較合適,欄目內容就使用p

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved