【轉貼】沒有div沒有float沒有clear沒有hack的超強CSS布局

【轉貼】沒有div沒有float沒有clear沒有hack的超強CSS布局

 

原貼地址：http://parandroid.com/no-float-css-layout/

 

CSS + XHTML 有多偉大不必多說了。但這項看似簡單的開發技術，有千種應用萬般變化。學會CSS + XHTML 不難，如何最合適最精簡的去應用才是最難的。我基本每隔一段時間會對帕蘭映像修改一下，很多時候，外觀沒有任何改變。只是為了自己又用更簡單的代碼實現的某個小部分的修改而沾沾自喜。

我們說CSS + XHTML，但很多時候，我們理解為DIV + XHTML。在網路上，你可以看到很多這種錯誤理解的執行個體，一些網頁設計中，堆砌著大量的冗餘DIV，進而需要再產生冗餘的CSS樣式定義屬性float, clear等，再進而要對不同瀏覽器進行Hack。很多設計師以自己精通Hack 為榮，但直接使用不需要Hack 的方法豈不是更道高一丈。

我個人不常用流行的圓角設計，除了因為美術功底不好，另外一部分原因就是它需要大量無實際意義的XHTML標籤。

聊天完畢。介紹一個超強的CSS 布局，沒有div，沒有float, 沒有clear, 沒有hack， 沒有和你開玩笑，確實是一個CSS 布局。出自TJKDesign 之手，你可以查看DEMO 示範 或閱讀該布局設計師的文章說明。下面是。

看看它的相容性：

• Windows
  • IE 5.01
  • IE 5.5
  • IE 6
  • IE 7
  • IE 8 Beta 1
  • Firefox 0.8
  • Firefox 1.5
  • Firefox 2.0
  • Opera 9.0
  • Opera 9.24
• Mac
  • IE 5.2 *
  • Safari 2.0
  • Safari 3.0
  • Firefox 2.0
  • Mozilla 1.7.3
  • Camino 0.8.2
• Linux
  • Konqueror
  • Mozilla
• iPhone

我並不是鼓勵你馬上去把自己網頁中的DIV 代碼全去掉，更不鼓勵為了精簡而精簡。事實上，這個超強的CSS 布局的真正實用性也有待進一步使用才知道，因為它呈現的不過是一個“Minimization design/最低限度設計”的網頁原型，。

但只要你是一個網頁設計愛好者，這絕對是一個你值得研究和學習的布局。所以，特此分享:)