你是否己經厭倦了傳統的方框和表格式的網頁設計呢?現在是學習如何擺脫這些方塊的時候,並做更多有創意的設計了。在這篇文章裡,收集了一些己經不使用表格設計的最佳案例。另外提供了一些快速的CSS技巧,說明如何擺脫表格設計,創立背景圖(background-image)和CSS的背景位置定位(position)屬性。

Example 1: Huge Inc

巨大的網站頁首設計,Huge(另開視窗)真的有吸引了我的注意。請關心的是,他的設計元素都蹦出表格外面了。

screenshot

其他圖摘: 2 , 3

Example 2: Jason Santa Maria

Jason 很投入在他的網站,並且用心的經營網站,而且注重很多細節,無可厚非的,他是我周遭最好的設計師網站。點選每篇文章,你會發現,每篇文章都有不同和特殊的樣式。有些圖片是在表格裡面,有些也是會設計出表格外。

screenshot

其他圖摘: 2 , 3

Example 3: A Brief Message

如同上例中Jason Santa Maria的網站,ABriefMessage.com 的每篇文章都有不同特色的圖片和CSS樣式設計。不同於一般的部落格網站,他網站上的文字跟圖都經有特別的排版,讓網站看起來就像是出版品一樣。

screenshot

其他圖摘: 2 , 3

Example 4: Trent Walton

TrentWalton.com 的焦點在於頁首,每篇文章都呈現不同的背景圖和樣式。

screenshot

其他圖摘: 2 , 3

Example 5: Wonderbra Ultimate Strapless

Wonderbra 雖然網站還有一些可及性(accessibility)的問題(例如:字體不能放大),但它仍是一個令人喜愛的設計。內文跟圖片很成功的配置在一起。乍看之下,我還以為是個全Flash的網站,但看了原始碼才知道他是利用 CSS 跟 Javascript 來做到內容交替的效果,cufon 。

screenshot

其他圖摘: 2 , 3

Example 6: Fox

Fox - Fringe 的網站打破沉悶的表格排版設計,壯闊的背景由上至下融合了全部的版面。此外,傾斜的梯型區塊,使畫面看起來更為有趣。不要忘記去看其他福斯電視劇的網站哦。

screenshot

其他圖摘: 2 , 3

Example 7: Mezzoblue

Mezzoblue 讓圖片延伸出表格外面。這很容易達成的效果,只需要把 margin-left 的屬性設為負值就好了。

screenshot

快速CSS教程

使用 CSS Absolute Position (看 demo)

以下的教程模仿的結果,就如同上面Sample 1 中 Huge 的網站,使用了 position 的屬性。在每個元素上設定 position:absolute  ,然後設定更高的 z-index 屬性,在Logo、導覽列及內容區上面(如此這些元素,就會放在圖片的上面了)

margin-left

使用背景圖 (看 demo)

在這個案例中,把Logo和文字【Click Here】嵌入背景圖中。並讓Logo跟文字【Click Here】可以點擊。首先設定 H1 的絕對位置屬性,然後設定 text-indent 為 -900em 來隱藏 H1 藏內的文字

設定【Click Here】的按鍵,使用絕對位置的屬性,來定義他要出現的位置。一樣設定 text-indent 為 -900em來隱藏文字的內容,然後在 a:hover 裡面設定定位點的位置,來移動圖片的位置,以達到滑鼠移過去後,變更圖片的效果。

background image

使用左邊距(margin-left) (看 demo)


這是一個簡單的案例,只要設定圖片靠左(float:left)與左邊距( margin-left)為負值即可。

margin-left


創作者介紹

設計自己也設計別人

jaichang2008 發表在 痞客邦 PIXNET 留言(0) 人氣()