DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 用CSS打造韓式風格網站
用CSS打造韓式風格網站
編輯:CSS進階教程     

用CSS打造韓式風格網站

    韓國網站的設計風格被國內網站設計愛好者稱之為“韓式風格”,而且現在越來越多的人正在模仿這種風格,下圖為一個韓式風格的網站效果,就筆者個人覺得韓式風格的網站設計思路之所以受到大家的喜歡與其色彩變化豐富,合理應用FLASH動畫,結構新穎等特點是分不開的,但是韓式風格的網站有一個最明顯的特點就是對於表格或是標題欄常會加上橫或豎的一條色帶,如下圖中圈起的地方:

  做這類圖我們一般都會想到用Photoshop等軟件來設計,當然這也是常用的方法,但是如果網頁上這類圖片太多,或是較大時,像我們目前國內的網絡環境要想打開你的網站可就有點累了,這裡我就給大家講一講如何用CSS來做這樣的風格,因為用CSS只是對顏色的定義,少了圖片的應用,所以速度基本不會被影響。

    首先,為頁面填加一個CSS效果類,具體設置如圖:

  點擊OK後,會彈出具體的效果設置,打開其中的border標簽,進行如下的設置:


 

    然後將Background標簽中的Background Color設置為:#BAEE66 在你要應用這種風格的表格上填加這個CSS效果就OK了,方法如圖:

  最終的效果:

  應用這種方法,大家可以做出各式各樣的表格來,而且很方便,即使你不會用Photoshop等軟件也沒關系,而且打開速度基本不會變慢,是不是很棒,以下都是筆者試做的幾種風格,大家可以根據border的設定再結合表格的設計來做出各式各樣的效果來,感興趣的朋友可以試一試。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved