你是否己經厭倦了傳統的方框和表格式的網頁設計呢？現在是學習如何擺脫這些方塊的時候，並做更多有創意的設計了。在這篇文章裡，收集了一些己經不使用表格設計的最佳案例。另外提供了一些快速的CSS技巧，說明如何擺脫表格設計，創立背景圖(background-image)和CSS的背景位置定位(position)屬性。
Example 1: Huge Inc
巨大的網站頁首設計，Huge(另開視窗)真的有吸引了我的注意。請關心的是，他的設計元素都蹦出表格外面了。
Example 2: Jason Santa Maria
Jason 很投入在他的網站，並且用心的經營網站，而且注重很多細節，無可厚非的，他是我周遭最好的設計師網站。點選每篇文章，你會發現，每篇文章都有不同和特殊的樣式。有些圖片是在表格裡面，有些也是會設計出表格外。
Example 3: A Brief Message
如同上例中Jason Santa Maria的網站，ABriefMessage.com 的每篇文章都有不同特色的圖片和CSS樣式設計。不同於一般的部落格網站，他網站上的文字跟圖都經有特別的排版，讓網站看起來就像是出版品一樣。
Example 4: Trent Walton
TrentWalton.com 的焦點在於頁首，每篇文章都呈現不同的背景圖和樣式。
Example 5: Wonderbra Ultimate Strapless
Wonderbra 雖然網站還有一些可及性(accessibility)的問題(例如：字體不能放大)，但它仍是一個令人喜愛的設計。內文跟圖片很成功的配置在一起。乍看之下，我還以為是個全Flash的網站，但看了原始碼才知道他是利用 CSS 跟 Javascript 來做到內容交替的效果，cufon 。
Example 6: Fox
Fox - Fringe 的網站打破沉悶的表格排版設計，壯闊的背景由上至下融合了全部的版面。此外，傾斜的梯型區塊，使畫面看起來更為有趣。不要忘記去看其他福斯電視劇的網站哦。
Example 7: Mezzoblue
Mezzoblue 讓圖片延伸出表格外面。這很容易達成的效果，只需要把 margin-left 的屬性設為負值就好了。
快速CSS教程
使用 CSS Absolute Position (看 demo)
以下的教程模仿的結果，就如同上面Sample 1 中 Huge 的網站，使用了 position 的屬性。在每個元素上設定 position:absolute ，然後設定更高的 z-index 屬性，在Logo、導覽列及內容區上面(如此這些元素，就會放在圖片的上面了)
使用背景圖 (看 demo)
在這個案例中，把Logo和文字【Click Here】嵌入背景圖中。並讓Logo跟文字【Click Here】可以點擊。首先設定 H1 的絕對位置屬性，然後設定 text-indent 為 -900em 來隱藏 H1 藏內的文字
設定【Click Here】的按鍵，使用絕對位置的屬性，來定義他要出現的位置。一樣設定 text-indent 為 -900em來隱藏文字的內容，然後在 a:hover 裡面設定定位點的位置，來移動圖片的位置，以達到滑鼠移過去後，變更圖片的效果。
使用左邊距(margin-left) (看 demo)
這是一個簡單的案例，只要設定圖片靠左(float:left)與左邊距( margin-left)為負值即可。
留言列表
Color (1)
