用 CSS 替代 HTML 的 table tag 設計網頁版面

來源:互聯網
上載者:User

版工之前就耳聞 CSS 功能強大,可完全取代 HTML 的 table、tr、td 等 tag,做網頁「外觀 (user interface)」的編排。CSS 除了可避免陷在 HTML 多層的巢狀 table 裡,亦可明顯減少網頁檔案大小,讓頁面日後可統一維護,而非逐一修改。日前版工找了一些書上的 CSS 範例,經簡單修改並測試後,開放七個 CSS + div tag 網頁排版的「樣板」讓大家下載 (.html 格式,可直接用瀏覽器開啟),內容如下:

(1) 兩欄式版面,畫面上的欄位寬度可隨瀏覽器自動調整
(2) 兩欄式版面,畫面上的欄位寬度固定,不可隨瀏覽器自動調整
(3) 三欄式版面,畫面上的欄位寬度可隨瀏覽器自動調整
(4) 三欄式版面,畫面上的欄位寬度固定,不可隨瀏覽器自動調整
(5) 多欄式版面,畫面上的欄位寬度可隨瀏覽器自動調整
(6) 多欄式版面,畫面上的欄位寬度固定,不可隨瀏覽器自動調整
(7) 非對稱、欄位座標不固定,畫面上的欄位位置可隨瀏覽器自動調整

本帖的範例程式碼下載點:
http://files.cnblogs.com/WizardWu/070915.zip

七個範例中,主要可區分為兩大類:
• 頁面中的欄位,會隨使用者的螢幕解析度、滑鼠拖曳瀏覽器邊框,自動延展和調整
• 頁面中的欄位,寬和高固定,不會隨使用者的螢幕解析度、滑鼠拖曳瀏覽器邊框,自動延展和調整

透過 CSS 對整個 div 區塊的統一設定,可讓頁面外觀的編輯和維護工作變得輕鬆許多。不過有少數 CSS 的屬性設定,需要額外考慮到瀏覽器的廠牌和新舊版本問題。此外本帖提供下載的多欄式版面範例中,亦要考慮到,當頁面其中一欄的圖文內容特別多時,是否會照欄位的預設寬度往下延伸,抑或圖文內容會圍繞別的欄位;此種情況可能會發生在「非固定欄寬」的頁面中,此時就得再引用其它 CSS 的排版技巧加以調整。

CSS 除了版面設計功能強大外,還有許多其它的優點。像是要讓使用者透過瀏覽器「列印」網頁,傳統的做法,開發人員可能會特地替需要列印的頁面,重新排版、重寫一個適合 A4 紙張列印的頁面;但透過 CSS,我們可以在使用者要列印時,讓其自動套用新的 CSS 樣式表,而非 redirect 到另一個專供列印的網頁,如此便可省下重新撰寫列印頁面的時間,及 Web server 的硬體系統資源。

-------------------------------------------------
本帖參考書籍:

[1] Christopher Schmitt,「CSS Cookbook, Second Edition」, O'Reilly 出版社, 2006/10
http://oreilly.com/catalog/9780596527419/index.html

-------------------------------------------------
本帖相關檔案:

[1] CSS Tutorial
http://www.w3schools.com/css/default.asp

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.