你正在學習 CSS 布局嗎?是不是還不能完全掌握純 CSS 布局?通常有兩種情況阻礙你的學習:
第一種可能是你還沒有理解 CSS 處理頁面的原理。在你考慮你的頁面整體表現(xiàn)效果前,你應當先考慮內容的語義和結構,
然后再針對語義、結構添加 CSS。這篇文章將告訴你應該怎樣把 HTML 結構化。
另一種原因是你對那些非常熟悉的表現(xiàn)層屬性(例如:cellpadding,、hspace、align="left"等等)束手無策,不知道該
轉換成對應的什么 CSS 語句。當你解決了第一種問題,知道了如何結構化你的 HTML,我再給出一個列表,詳細列出原來的表
現(xiàn)屬性用什么 CSS 來代替。
結構化 HTML
我們在剛學習網頁制作時,總是先考慮怎么設計,考慮那些圖片、字體、顏色、以及布局方案。然后我們用 Photoshop
或者 Fireworks 畫出來、切割成小圖。最后再通過編輯 HTML 將所有設計還原表現(xiàn)在頁面上。
如果你希望你的 HTML 頁面用 CSS 布局(是 CSS-friendly 的),你需要回頭重來,先不考慮“外觀”,要先思考你的頁面
內容的語義和結構。
外觀并不是最重要的。一個結構良好的 HTML 頁面可以以任何外觀表現(xiàn)出來,CSS Zen Garden 是一個典型的例子。CSS Zen
Garden 幫助我們最終認識到 CSS 的強大力量。
HTML 不僅僅只在電腦屏幕上閱讀。你用 photoshop 精心設計的畫面可能不能顯示在 PDA、移動電話和屏幕閱讀機上。但
是一個結構良好的 HTML 頁面可以通過 CSS 的不同定義,顯示在任何地方,任何網絡設備上。
開始思考
首先要學習什么是"結構",一些作家也稱之為"語義"。這個術語的意思是你需要分析你的內容塊,以及每塊內容服務的
目的,然后再根據這些內容目的建立起相應的 HTML 結構。