如何讓你的Web項(xiàng)目漂亮、有趣！

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

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

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

我想大家對Bootstrap應(yīng)該很熟悉了，但是因?yàn)樗餍辛?，很多人照著《Flask Web開發(fā)》做出來的博客從功能到外表，全都一個(gè)模樣……那么，我就來推薦三個(gè)不同風(fēng)格的優(yōu)秀的CSS框架。

Materialize —— Material Design風(fēng)格

http://materializecss.com/

Google在2014年推出了一個(gè)設(shè)計(jì)語言——Material Design(譯作“原質(zhì)化設(shè)計(jì)”，“質(zhì)感設(shè)計(jì)”或是“原質(zhì)設(shè)計(jì)”)，代號(hào)是Quantum Paper(量子紙)?？纯聪旅孢@張圖片你就明白了，這些卡片和圓形懸浮按鈕你肯定不陌生：

Materialize就是基于Material Design的CSS框架(同類的還有一個(gè)Material UI)，使用它你可以輕松做出來很清新的頁面效果。專欄下一個(gè)實(shí)踐項(xiàng)目(to-do list App)用的就是這個(gè)框架，我找來了另一個(gè)同樣使用Flask做的to-do list App，做個(gè)簡單對比：

這是使用Bootstrap的頁面：

這是使用Materialize的頁面：

另外，評論區(qū)知友@劉二強(qiáng)烈推薦了Google自家的Material Design Lite。

Semantic-UI —— 語義化

http://semantic-ui.com/

Semantic-UI是一個(gè)語義化的前端框架，因?yàn)樗菄@自然語言架構(gòu)的，所以使用起來也很方便?？纯聪旅孢@個(gè)例子你就可以理解它的語義化特點(diǎn)了：

再舉個(gè)例子，在Bootstrap你想創(chuàng)建一個(gè)藍(lán)色按鈕，你需要這樣：

在Semantic-UI里，只需要這樣：

不光對搜索引擎友好，而且很容易理解和使用。

而且Semantic-UI的按鈕很豐富：

Pure —— 輕量級

http://purecss.io/

Bootstrap是Twitter推出的開源框架，而Pure是Yahoo!推出的開源框架。它的特點(diǎn)是純CSS實(shí)現(xiàn)，而且體積很小，整個(gè)框架壓縮后只有5.7k左右。這是一個(gè)典型頁面：

如果你已經(jīng)習(xí)慣了Bootstrap，不想嘗試新東西，那么可以嘗試基于Bootstrap的Flat UI(扁平化UI工具包)和Bootswatch(提供了各種Bootstrap主題)。

快動(dòng)手讓你的Web項(xiàng)目變漂亮一點(diǎn)吧，下面說說如何讓你的Web項(xiàng)目變得有趣起來。

在面我們介紹了幾個(gè)CSS框架，這次要介紹一些讓你的項(xiàng)目變得有趣的庫和工具。這些工具用起來都很簡單，所以就不具體說用法了，感興趣的話可以點(diǎn)進(jìn)鏈接去了解。

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

Animate.css

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

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

AniJS

http://anijs.github.io/

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

Hover.css

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

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

CSShake

https://elrumordelaluz.github.io/csshake/

CSShake可以讓你的元素?fù)u晃起來，可以是輕輕的搖晃，水平的搖晃，也可以是瘋狂的搖晃……用它可以制造出很搞笑的感覺。

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/

在你的頁面上添加一個(gè)打字機(jī)效果。雖然用js很容易實(shí)現(xiàn)，但這個(gè)要更完善，有更多的自定義選項(xiàng)。

二、創(chuàng)意

404頁面

為你的項(xiàng)目添加一個(gè)有趣的404頁面也是很重要的，我在這個(gè)回答里整理了20多個(gè)有意思的404頁面，希望能給你帶來啟發(fā)。

三、工具

Instafavicon

https://instafavicon.com

項(xiàng)目要展示了，少不了一個(gè)favicon。這個(gè)網(wǎng)站可以幫你快速生成一個(gè)簡潔美觀的站點(diǎn)圖標(biāo)。

favico.js

有了favicon后，使用favico.js你還可以給它加上一些動(dòng)態(tài)效果，比如像圖片里那樣添加一個(gè)顯示消息數(shù)量的badge，或是添加一個(gè)靜音圖標(biāo)。

Github Page Generator

做好了Demo，你可以用Github提供的介紹頁生成器生成一個(gè)漂亮的項(xiàng)目介紹頁。上圖是上一個(gè)實(shí)踐項(xiàng)目的項(xiàng)目介紹頁。

Github提供了很多主題可供選擇：

四、掛件

Github Ribbon

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

Flask Badge

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

當(dāng)前題目：如何讓你的Web項(xiàng)目漂亮、有趣！
網(wǎng)站網(wǎng)址：http://www.muchs.cn/news25/167775.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、營銷型網(wǎng)站建設(shè)、微信小程序、自適應(yīng)網(wǎng)站、虛擬主機(jī)、微信公眾號(hào)

廣告

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