簡(jiǎn)單和好看，兩個(gè)都要

學(xué)習(xí)前期，盡力把大部分的時(shí)間和精力放在實(shí)現(xiàn)后端功能上。可多多用前端框架與庫(kù)來(lái)減少勞動(dòng)力的分量，例如jQuery。但是要了解CSS和JavaScript，不然使用時(shí)也會(huì)有困難。等到有了時(shí)間，就好好補(bǔ)一下基礎(chǔ)，避免過(guò)度依賴(lài)框架。

好看很重要。長(zhǎng)相天生，項(xiàng)目的外觀(guān)卻由你決定。盡管不是自己實(shí)現(xiàn)的效果，但看到自己的APP美觀(guān)大方，你會(huì)不顧一切的在腦子里形成一個(gè)“我創(chuàng)造了美好的事物”的念頭，由此帶來(lái)的巨大的成就感會(huì)激勵(lì)你繼續(xù)學(xué)習(xí)(和自戀)下去。而且，你的外行朋友們會(huì)對(duì)你一臉崇拜~

我想大家對(duì)Bootstrap應(yīng)該很熟悉了，但是因?yàn)樗餍辛?，很多人照著《Flask Web開(kāi)發(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框架(同類(lèi)的還有一個(gè)Material UI)，使用它你可以輕松做出來(lái)很清新的頁(yè)面效果。專(zhuān)欄下一個(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推出的開(kāi)源框架，而Pure是Yahoo!推出的開(kāi)源框架。它的特點(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ō)用法了，感興趣的話(huà)可以點(diǎn)進(jìn)鏈接去了解。

一、動(dòng)態(tài)效果

Animate.css

https://daneden.github.io/animate.css/

Animate.css是比較流行的動(dòng)畫(huà)效果庫(kù)，提供了大量的動(dòng)畫(huà)效果，你可以點(diǎn)進(jìn)鏈接嘗試一下。

AniJS

http://anijs.github.io/

AniJS和Animate.css一樣，也提供了很多的動(dòng)畫(huà)效果，體驗(yàn)頁(yè)面很方便。

Hover.css

http://ianlunn.github.io/Hover/

Hover.css提供了大量hover時(shí)的動(dòng)畫(huà)效果。

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)畫(huà)的demo，項(xiàng)目大多是開(kāi)源的。

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)潔美觀(guā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

很多開(kāi)源項(xiàng)目都會(huì)在網(wǎng)頁(yè)的邊角放一個(gè)這樣的Github ribbon。

Flask Badge

Flask提供了很多badge，你可以把它放到你的網(wǎng)頁(yè)的footer里。

當(dāng)前標(biāo)題：如何讓你的Web項(xiàng)目漂亮、有趣！
當(dāng)前網(wǎng)址：http://jinyejixie.com/news/167775.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、定制網(wǎng)站、App設(shè)計(jì)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)