推薦：傳百度360競購2345網址導航 流量大戰(zhàn)或開啟
網址導航領域或將迎來新一輪并購。據(jù)消息人士透露，百度、360正在競購2345網址導航站，目前合作最終歸屬尚未敲定。

　　接著將引用寫入網頁頭部中，代碼為 ，這時候我們可以隨時在網站上任意地方自由使用這些圖標字體了，如要想將一個卡車圖標添加到注冊按鈕的話只需聲明一下就可以， Sign up today。同時為了防止加入圖標字體后引起按鈕拉伸變形，還需要一點點額外的工作，將按鈕寬度加大一點(.jumbotron .btn i { margin-right: 8px; })。最后效果如下：

　　

 

　　四. CSS3

　　將上面都搞定后接下來要做的就是再加點 CSS3 特效了，如果時間不夠的話簡單的添加上盒陰影box-shadow和字體陰影text-shadow就可以讓網站增色不少，CSS 代碼如下。

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

　　如果時間足夠的話還可以添加一個放射漸變填充效果，可以讓標題的顯示效果更重一些，如下面對比圖所示。(如果想要更多 CSS 效果的話可以去學習一下 CodeSchool 的在線教程)

　　

 

　　五. jQuery

　　其實到這里了話網站看起來已經很不錯了，但為了讓它更加個性化，還需要再添加上一張背景圖片。對很多程序員來說這一步是比較難以進行的，那么應該如何選擇一張設計師可能會使用的圖片呢?答案就是去iStockPhoto或類似的付費圖庫中去尋找。

　　這里我們將使用 Winter Sun 這張照片，為了讓網站保持自適應布局，還需要使用 Backstretch 這個 jQuery 插件讓背景圖可以隨時自動調整大小。

　　首先需要付費下載背景圖片，然后放到 /img/ 文件目錄中去。

　　將此圖片設置為的背景圖(background-image): $.backstretch("/img/winter.jpg");

　　加入背景圖后網頁主題部分會產生遮擋，所以可以讓其透明，這樣網站效果看起來會更加現(xiàn)代、有設計感。這里可以使用這個技巧將網站變得透明，代碼見右邊，.container-narrow {background: url(/img/cream_dust_transparent.png) repeat 0 0;}

　　

效果

 

　　六. 色調

　　到這幾乎差不多已經完成調整了，但如果你夠細心的話會發(fā)現(xiàn)按鈕以及導航菜單的顏色還是 Bootstrap 默認的藍色系。在有著設計師存在網站，設計師都會負責進行網站色調的調整，為了保證網站的一致性，所有按鈕和導航一般是三到四種顏色(更多可以查看極客公園之間的文章小按鈕大學問)。

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

　　使用 GIMP 的取色器讀取背景圖片的主題顏色，確認其 GBR 十六進制值;

　　使用 Color Scheme Designer確認與差異大但同時又互補的顏色;

　　最后根據(jù)確定的顏色來制定按鈕，可以用[Bootstrap Buttons][]等在線直接生成。

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

　　

 

　　結語

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

　　除非特別聲明，極客觀察均為極客公園原創(chuàng)報道，轉載請注明原文鏈接。

　　原文地址：http://www.geekpark.net/read/view/176891

分享：解讀京東商業(yè)模式: 立足零售 展望增值服務
“京東的商業(yè)模式到底是什么?”這個問題一次次的被提出來，在此，我也想跟大家一起聊聊京東的商業(yè)模式。