天天看點

教你快速打造一個有設計感的網站

雖然隻是一名程式員,但還是想讓自己的網站看起來更加吸引人,一方面出于虛榮,因為這樣可以顯得更加“專業”,而另一方面是出于現實,因為研究機構調查發現使用者會更加信任那些網站“看起來”很好的網站。但是因為很長時間一直從事的是程式設計工作,對設計并不是熟悉,甚至害怕,因為在我這個外行看來設計是由很多隻能感受不能言傳身教的規則以及所謂的設計感悟組成的,知識壁壘比較高。

但是不久之前我決定要盡我最大努力讓我網站看起來顯得更加專業一點,即使比不上真正由設計師操刀做出來的效果,

如果你隻是一個程式員,不懂的設計,卻還想讓自己的網站看起來更加吸引人,那麼,當你看到這篇博文時,你的幸運所之而來。雖然可能體會不到那種那麼所謂設計者的隻能感受不能言傳身教的規則以及所謂的設計感悟,但是通過下面的方法做出來的網站,會顯得很專業,滿足一把自己的設計虛榮心,同時增大網站的流量,畢竟使用者更喜歡,也更信任那些“看起來很好看”的網站。

教你快速打造一個有設計感的網站
教你快速打造一個有設計感的網站

決定使用 Bootstrap 是邁出的重要一步,相比其他可以在前端開發上節省很多精力,但有利有弊,如果你決定使用 Bootstrap 的話就意味着很有可能會和其他人“撞架構”,就像預設的 WordPress 皮膚一樣,如果大家都完全用 Bootstrap 的樣式的話,會讓不少見得多的人心生厭煩。

教你快速打造一個有設計感的網站

在網頁頭部中加入此代碼:

在 CSS 樣式表 custom.css 中加入以下代碼:h1, h2, h3, h4, h5, h6 {font-family: ‘Corben’, Georgia, Times, serif;} p, div {font-family: ‘Nobile’, Helvetica, Arial, sans-serif;}

添加完後重新整理即可檢視效果了,現在我們的網站樣式已經變成下面這樣了,看起來比預設好多了。

教你快速打造一個有設計感的網站

知道如何讓一個網站看起來更加高雅優雅一些嗎?是的,紋理。就像 24WAY 的背景紋理一樣。

教你快速打造一個有設計感的網站
教你快速打造一個有設計感的網站

/fonts/ 檔案夾,将其放進去。然後再将 font-awesome.css 檔案放到 /css/ 目錄檔案夾。

.btn i { margin-right: 8px; })。最後效果如下:

教你快速打造一個有設計感的網站

代碼如下。

h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }

教你快速打造一個有設計感的網站

jQuery 插件讓背景圖可以随時自動調整大小。

首先需要付費下載下傳背景圖檔,然後放到 /img/ 檔案目錄中去。

将此圖檔設定為的背景圖(background-image): $.backstretch(“/img/winter.jpg”);

{background: url(/img/cream_dust_transparent.png) repeat 0 0;}

教你快速打造一個有設計感的網站

效果

在這裡,雖然不可能像大公司網站那樣取色嚴謹,但還是有一些快速的方法使網站看起來很搭配的。

這樣首頁上那個大大的注冊按鈕就搞定了,接下來是修改導航菜單的顔色,這個比較簡單,寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。看看咋樣。

教你快速打造一個有設計感的網站

如果經曆過了上面所說的流程的話,相信你已經可以在比較短的時間内制作出了一個還能拿得出手的網站了。

繼續閱讀