用CSS打造韓式風格網站 |
韓國網站的設計風格被國內網站設計愛好者稱之為“韓式風格”,而且現在越來越多的人正在模仿這種風格,下圖為一個韓式風格的網站效果,就筆者個人覺得韓式風格的網站設計思路之所以受到大家的喜歡與其色彩變化豐富,合理應用FLASH動畫,結構新穎等特點是分不開的,但是韓式風格的網站有一個最明顯的特點就是對于表格或是標題欄常會加上橫或豎的一條色帶,如下圖中圈起的地方: 做這類圖我們一般都會想到用Photoshop等軟件來設計,當然這也是常用的方法,但是如果網頁上這類圖片太多,或是較大時,像我們目前國內的網絡環境要想打開你的網站可就有點累了,這里我就給大家講一講如何用CSS來做這樣的風格,因為用CSS只是對顏色的定義,少了圖片的應用,所以速度基本不會被影響。 首先,為頁面填加一個CSS效果類,具體設置如圖: 點擊OK后,會彈出具體的效果設置,打開其中的border標簽,進行如下的設置:
然后將Background標簽中的Background Color設置為:#BAEE66 在你要應用這種風格的表格上填加這個CSS效果就OK了,方法如圖: 最終的效果: 應用這種方法,大家可以做出各式各樣的表格來,而且很方便,即使你不會用Photoshop等軟件也沒關系,而且打開速度基本不會變慢,是不是很棒,以下都是筆者試做的幾種風格,大家可以根據border的設定再結合表格的設計來做出各式各樣的效果來,感興趣的朋友可以試一試。 |
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15