學(xué)習(xí)前期，盡力把大部分的時(shí)間和精力放在實(shí)現(xiàn)后端功能上?？啥喽嘤们岸丝蚣芘c庫(kù)來(lái)減少勞動(dòng)力的分量，例如jQuery。但是要了解CSS和JavaScript，不然使用時(shí)也會(huì)有困難。等到有了時(shí)間，就好好補(bǔ)一下基礎(chǔ)，避免過(guò)度依賴框架。
好看很重要。長(zhǎng)相天生，項(xiàng)目的外觀卻由你決定。盡管不是自己實(shí)現(xiàn)的效果，但看到自己的APP美觀大方，你會(huì)不顧一切的在腦子里形成一個(gè)“我創(chuàng)造了美好的事物”的念頭，由此帶來(lái)的巨大的成就感會(huì)激勵(lì)你繼續(xù)學(xué)習(xí)(和自戀)下去。而且，你的外行朋友們會(huì)對(duì)你一臉崇拜~
我想大家對(duì)Bootstrap應(yīng)該很熟悉了，但是因?yàn)樗餍辛耍芏嗳苏罩禙lask Web開發(fā)》做出來(lái)的博客從功能到外表，全都一個(gè)模樣……那么，我就來(lái)推薦三個(gè)不同風(fēng)格的優(yōu)秀的CSS框架。
Materialize —— Material Design風(fēng)格
http://materializecss.com/
Google在2014年推出了一個(gè)設(shè)計(jì)語(yǔ)言——Material Design(譯作“原質(zhì)化設(shè)計(jì)”，“質(zhì)感設(shè)計(jì)”或是“原質(zhì)設(shè)計(jì)”)，代號(hào)是Quantum Paper(量子紙)?？纯聪旅孢@張圖片你就明白了，這些卡片和圓形懸浮按鈕你肯定不陌生：
Materialize就是基于Material Design的CSS框架(同類的還有一個(gè)Material UI)，使用它你可以輕松做出來(lái)很清新的頁(yè)面效果。專欄下一個(gè)實(shí)踐項(xiàng)目(to-do list App)用的就是這個(gè)框架，我找來(lái)了另一個(gè)同樣使用Flask做的to-do list App，做個(gè)簡(jiǎn)單對(duì)比：
這是使用Bootstrap的頁(yè)面：
這是使用Materialize的頁(yè)面：
另外，評(píng)論區(qū)知友@劉二強(qiáng)烈推薦了Google自家的Material Design Lite。
Semantic-UI —— 語(yǔ)義化
http://semantic-ui.com/
Semantic-UI是一個(gè)語(yǔ)義化的前端框架，因?yàn)樗菄@自然語(yǔ)言架構(gòu)的，所以使用起來(lái)也很方便?？纯聪旅孢@個(gè)例子你就可以理解它的語(yǔ)義化特點(diǎn)了：
再舉個(gè)例子，在Bootstrap你想創(chuàng)建一個(gè)藍(lán)色按鈕，你需要這樣：
在Semantic-UI里，只需要這樣：
不光對(duì)搜索引擎友好，而且很容易理解和使用。
而且Semantic-UI的按鈕很豐富：
Pure —— 輕量級(jí)
http://purecss.io/
Bootstrap是Twitter推出的開源框架，而Pure是Yahoo!推出的開源框架。它的特點(diǎn)是純CSS實(shí)現(xiàn)，而且體積很小，整個(gè)框架壓縮后只有5.7k左右。這是一個(gè)典型頁(yè)面：
如果你已經(jīng)習(xí)慣了Bootstrap，不想嘗試新東西，那么可以嘗試基于Bootstrap的Flat UI(扁平化UI工具包)和Bootswatch(提供了各種Bootstrap主題)。
快動(dòng)手讓你的Web項(xiàng)目變漂亮一點(diǎn)吧，下面說(shuō)說(shuō)如何讓你的Web項(xiàng)目變得有趣起來(lái)。
在面我們介紹了幾個(gè)CSS框架，這次要介紹一些讓你的項(xiàng)目變得有趣的庫(kù)和工具。這些工具用起來(lái)都很簡(jiǎn)單，所以就不具體說(shuō)用法了，感興趣的話可以點(diǎn)進(jìn)鏈接去了解。
一、動(dòng)態(tài)效果
Animate.css
https://daneden.github.io/animate.css/
Animate.css是比較流行的動(dòng)畫效果庫(kù)，提供了大量的動(dòng)畫效果，你可以點(diǎn)進(jìn)鏈接嘗試一下。
AniJS
http://anijs.github.io/
AniJS和Animate.css一樣，也提供了很多的動(dòng)畫效果，體驗(yàn)頁(yè)面很方便。
Hover.css
http://ianlunn.github.io/Hover/
Hover.css提供了大量hover時(shí)的動(dòng)畫效果。
CSShake
https://elrumordelaluz.github.io/csshake/
CSShake可以讓你的元素?fù)u晃起來(lái)，可以是輕輕的搖晃，水平的搖晃，也可以是瘋狂的搖晃……用它可以制造出很搞笑的感覺(jué)。
Hakim.se
http://hakim.se/
這是Reveal.js的作者Hakim El Hattab的個(gè)人網(wǎng)站，上面有很多交互和CSS動(dòng)畫的demo，項(xiàng)目大多是開源的。
Typed.js
http://www.mattboldt.com/demos/typed-js/
在你的頁(yè)面上添加一個(gè)打字機(jī)效果。雖然用js很容易實(shí)現(xiàn)，但這個(gè)要更完善，有更多的自定義選項(xiàng)。
二、創(chuàng)意
404頁(yè)面
為你的項(xiàng)目添加一個(gè)有趣的404頁(yè)面也是很重要的，我在這個(gè)回答里整理了20多個(gè)有意思的404頁(yè)面，希望能給你帶來(lái)啟發(fā)。
三、工具
Instafavicon
https://instafavicon.com
項(xiàng)目要展示了，少不了一個(gè)favicon。這個(gè)網(wǎng)站可以幫你快速生成一個(gè)簡(jiǎn)潔美觀的站點(diǎn)圖標(biāo)。
favico.js
有了favicon后，使用favico.js你還可以給它加上一些動(dòng)態(tài)效果，比如像圖片里那樣添加一個(gè)顯示消息數(shù)量的badge，或是添加一個(gè)靜音圖標(biāo)。
Github Page Generator
做好了Demo，你可以用Github提供的介紹頁(yè)生成器生成一個(gè)漂亮的項(xiàng)目介紹頁(yè)。上圖是上一個(gè)實(shí)踐項(xiàng)目的項(xiàng)目介紹頁(yè)。
Github提供了很多主題可供選擇：
四、掛件
Github Ribbon
很多開源項(xiàng)目都會(huì)在網(wǎng)頁(yè)的邊角放一個(gè)這樣的Github ribbon。
Flask Badge
Flask提供了很多badge，你可以把它放到你的網(wǎng)頁(yè)的footer里。
