推薦：傳百度360競(jìng)購(gòu)2345網(wǎng)址導(dǎo)航 流量大戰(zhàn)或開(kāi)啟
網(wǎng)址導(dǎo)航領(lǐng)域或?qū)⒂瓉?lái)新一輪并購(gòu)。據(jù)消息人士透露，百度、360正在競(jìng)購(gòu)2345網(wǎng)址導(dǎo)航站，目前合作最終歸屬尚未敲定。

 

　　[核心提示] 還在用 WordPress 建站嗎?落后了親!趕緊試試 Twitter Bootstrap 吧。

　　注：擁有屬于自己的網(wǎng)站是很多人的夢(mèng)想，但大多數(shù)人只能借助像 WordPress 這樣的 CMS 實(shí)現(xiàn)，甚至很多公司網(wǎng)站也是這樣。但這些網(wǎng)站大多數(shù)看起來(lái)都比較缺乏設(shè)計(jì)感，通俗來(lái)講就是有點(diǎn)“土”。那么對(duì)于像程序員以及其他對(duì)設(shè)計(jì)比較小白們來(lái)說(shuō)，如何能讓你的網(wǎng)站看起來(lái)更加前衛(wèi)，有范，有設(shè)計(jì)感呢?極客公園編譯了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 為您提供解決方法。

　　像我這樣的程序員來(lái)說(shuō)經(jīng)常被“設(shè)計(jì)”這個(gè)詞嚇到，因?yàn)槲沂且幻�程序員而不是設(shè)計(jì)師，我擁有的是計(jì)算機(jī)學(xué)位證，另外我對(duì) Comic Sans 字體并不介意。(注：Comic Sans 字體是 Win95 附帶的一種漫畫(huà)字體，設(shè)計(jì)行業(yè)極為排斥，設(shè)計(jì)師或那些擁有美學(xué)情結(jié)的人不屑與之為伍。更多查看這篇為什么不要使用 Comic sans 字體)

　　雖然只是一名程序員，但我還是想讓自己的網(wǎng)站看起來(lái)更加吸引人，一方面出于虛榮，因?yàn)檫@樣可以顯得我更加“專業(yè)”，而另一方面是出于現(xiàn)實(shí)，因?yàn)檠芯繖C(jī)構(gòu)調(diào)查發(fā)現(xiàn)用戶會(huì)更加信任那些網(wǎng)站“看起來(lái)”很好的網(wǎng)站。但是因?yàn)楹荛L(zhǎng)時(shí)間一直從事的是編程工作，對(duì)設(shè)計(jì)并不是熟悉，甚至害怕，因?yàn)樵谖疫@個(gè)外行看來(lái)設(shè)計(jì)是由很多只能感受不能言傳身教的規(guī)則以及所謂的設(shè)計(jì)感悟組成的，知識(shí)壁壘比較高。

　　但是不久之前我決定要盡我最大努力讓我網(wǎng)站看起來(lái)顯得更加專業(yè)一點(diǎn)，即使比不上真正由設(shè)計(jì)師操刀做出來(lái)的效果，但對(duì)像我這種沒(méi)有設(shè)計(jì)能力的人來(lái)說(shuō)還是很有幫助的。

　　1. 使用 Bootstrap

　　如果你還沒(méi)有使用 Bootstrap 的話那么趕緊開(kāi)始吧，這個(gè)來(lái)自 Twitter 的開(kāi)源項(xiàng)目使得網(wǎng)站設(shè)計(jì)真正進(jìn)入大眾化時(shí)代。

　　

 

　　本質(zhì)上 Bootstrap 是一種隔柵系統(tǒng)，由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開(kāi)發(fā)的開(kāi)源前端框架[注：想了解更多請(qǐng)查看什么是 Twitter Bootstrap?]，它集成了很多 CSS 樣式的合集，可以幫助那些不懂或者不擅長(zhǎng) CSS 的開(kāi)發(fā)人員快速的建立一個(gè)外觀看起來(lái)很不錯(cuò)的網(wǎng)站。

　　使用 Bootstrap 的另一個(gè)好處就是網(wǎng)站本身就是自適應(yīng)的(Responsive)，可以省去各種為移動(dòng)設(shè)備等的適配工作。此外，Bootstrap 還是可定制的，可以根據(jù)你的需求自己配置。(注：英文不好的可以查看中文版的 Bootstrap 文檔或 Bootstrap中文網(wǎng))

　　

 

　　2. Bootstrap 定制指南

　　決定使用 Bootstrap 是邁出的重要一步，相比其他可以在前端開(kāi)發(fā)上節(jié)省很多精力，但有利有弊，如果你決定使用 Bootstrap 的話就意味著很有可能會(huì)和其他人“撞框架”，就像默認(rèn)的 WordPress 皮膚一樣，如果大家都完全用 Bootstrap 的樣式的話，會(huì)讓不少見(jiàn)得多的人心生厭煩。

　　所以，如果實(shí)在抽不出時(shí)間的話可以去Wrap Bootstrap購(gòu)買(mǎi)一份主題皮膚，這些主題皮膚都是由專業(yè)的設(shè)計(jì)師設(shè)計(jì)的，雖然不會(huì)成為唯一定制的，但已經(jīng)看起來(lái)相當(dāng)不錯(cuò)了，而且這種方法是最快速的。接下來(lái)就是以 Narrow marketing 這個(gè)模板(下圖)為例教你如何自己定制一份完全屬于你自己的 Bootstrap 。

　　

 

　　一. 字體

　　修改網(wǎng)頁(yè)字體是讓網(wǎng)站看起來(lái)更有特色、有現(xiàn)代感的捷徑，我們可以去谷歌的字體服務(wù)(免費(fèi)正版)中隨意挑選自己喜歡的字體，但是要注意字體間的搭配，在這里我們選擇由 DesignShack 推薦的谷歌字體搭配中的一種：Cardo(用于標(biāo)題) 和 Nobile(用于主體內(nèi)文)。

　　在網(wǎng)頁(yè)頭部中加入此代碼：

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

　　添加完后刷新即可查看效果了，現(xiàn)在我們的網(wǎng)站樣式已經(jīng)變成下面這樣了，看起來(lái)比默認(rèn)好多了。

　　

 

　　此外，除了谷歌的字體服務(wù)外還可以使用像 Fontdeck或 Typekit 字體服務(wù)，它們的字體更多，更多的字體搭配方案可以參考Type Connection。

　　二. 紋理

　　知道如何讓一個(gè)網(wǎng)站看起來(lái)更加高雅優(yōu)雅一些嗎?是的，紋理。就像 24WAY 的背景紋理一樣。

　　

 

　　但是這些紋理效果應(yīng)該去哪里尋找呢?設(shè)計(jì)師 Atle Mo 的 Subtle Patterns 網(wǎng)站是個(gè)不錯(cuò)的去處，我們接下來(lái)就使用這個(gè)網(wǎng)站上的 Cream Dust 紋理。點(diǎn)擊下載，將紋理圖片保存到本地，然后放到根目錄下的 /img/ 目錄文件夾中，最后到 CSS 樣式表中加入代碼 body { background: url(/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多樣式的紋理或紋理的其他用法的話可以看看 Smashing 的這篇文章)

　　

 

　　添加紋理前后對(duì)比(大圖)

　　三. 圖標(biāo)

　　這里的圖標(biāo)并不是指那些透明的 PNG 圖片圖標(biāo)，而是圖標(biāo)字體，其加載方式和字體一樣，由 CSS 樣式控制，比起圖片圖標(biāo)來(lái)說(shuō)這種圖標(biāo)字體加載速度更加，對(duì)資源的消耗也更低。在去年 24WAY 曾經(jīng)有一篇如何在網(wǎng)站中使用圖標(biāo)字體的文章。

　　對(duì)于 Bootstrap 框架來(lái)說(shuō)，整合的圖標(biāo)字體是Font Awesome(Shifticons也是一個(gè)不錯(cuò)的選擇)，和谷歌的字體服務(wù)一樣也是免費(fèi)開(kāi)源的。要使用它只需將其下載下來(lái)，然后在根目錄下創(chuàng)建 /fonts/ 文件夾，將其放進(jìn)去。然后再將 font-awesome.css 文件放到 /css/ 目錄文件夾。

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