CSS DIV 區塊標籤的使用教學

傳統在 HTML 上排板都是採用表格(table)的方式,但是用表格排板會衍伸出許多的缺點,例如表格的架構必須等整個 table 完整下載後,才能順利呈現,如果表格內的東西相當多(例如圖檔或影片檔)的時候,就可以感覺到網頁開啟速度較慢,另外是 Table 的標籤過多,一方面整理起來比較花時間,另一方面是搜尋引擎比較不容易看懂你的程式碼。現在新一代的設計採用 CSS + DIV 的排板方式,取代傳統的 table 排板,並解決舊有的問題,提升網頁開起速度,這篇就是要告訴你如何使用 DIV 標籤。

DIV 可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個物件,大致長成這樣 <div>內容</div>,你可以用 div 將網頁內容的各區塊包起來,再去做 CSS 排板,目前所有的主流瀏覽器都支援 DIV 標籤。

透過 CSS +DIV 排板的網頁架構範例
<body>
 <h1>這裡是網頁標題</h1>
 <div>這裡是網頁第一個區塊的內容</div>
 <div>這裡是網頁第二個區塊的內容</div>
 ...
</doby>
每個 DIV 包起來的區塊裡面還可以使用其它的規劃,例如 h2、h3、小區塊(一樣使用 div 標籤)或 span 標籤等。

每個區塊都可以使用 id 在外部寫 CSS 的語法,像這樣 <div id="content">這裡是網頁區塊內容</div> 或者直接寫 style 進去,像這樣 <div style="font-size:13px;">這裡是網頁區塊內容</div>。

DIV 標籤在瀏覽器中是一個獨立的區塊,會獨自佔用一行,如果你使用了兩個 div 區塊,類似上方範例這樣,則兩個 div 區塊會呈現為由上往下排列,與 span 標籤可以由左而右排列不同,這個原因是瀏覽器自動為每個 div 結尾後面加上換行的動作。

要讓 DIV 由左至右排列,可以使用 float(浮動)語法來達成。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C