推薦：傳百度360競購2345網(wǎng)址導(dǎo)航 流量大戰(zhàn)或開啟
網(wǎng)址導(dǎo)航領(lǐng)域或?qū)⒂瓉硇乱惠啿①�。�?jù)消息人士透露，百度、360正在競購2345網(wǎng)址導(dǎo)航站，目前合作最終歸屬尚未敲定。

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

　　

 

　　四. CSS3

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

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

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

　　

 

　　五. jQuery

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

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

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

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

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

　　

效果

 

　　六. 色調(diào)

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

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

　　使用 GIMP 的取色器讀取背景圖片的主題顏色，確認(rèn)其 GBR 十六進(jìn)制值;

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

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

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

　　

 

　　結(jié)語

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

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

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

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