如何讓你的Web項目漂亮、有趣！

簡單和好看，兩個都要

學習前期，盡力把大部分的時間和精力放在實現后端功能上。可多多用前端框架與庫來減少勞動力的分量，例如jQuery。但是要了解CSS和JavaScript，不然使用時也會有困難。等到有了時間，就好好補一下基礎，避免過度依賴框架。

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

我想大家對Bootstrap應該很熟悉了，但是因為它太流行了，很多人照著《Flask Web開發(fā)》做出來的博客從功能到外表，全都一個模樣……那么，我就來推薦三個不同風格的優(yōu)秀的CSS框架。

Materialize —— Material Design風格

http://materializecss.com/

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

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

這是使用Bootstrap的頁面：

這是使用Materialize的頁面：

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

Semantic-UI —— 語義化

http://semantic-ui.com/

Semantic-UI是一個語義化的前端框架，因為它是圍繞自然語言架構的，所以使用起來也很方便?？纯聪旅孢@個例子你就可以理解它的語義化特點了：

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

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

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

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

Pure —— 輕量級

http://purecss.io/

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

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

快動手讓你的Web項目變漂亮一點吧，下面說說如何讓你的Web項目變得有趣起來。

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

一、動態(tài)效果

Animate.css

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

Animate.css是比較流行的動畫效果庫，提供了大量的動畫效果，你可以點進鏈接嘗試一下。

AniJS

http://anijs.github.io/

AniJS和Animate.css一樣，也提供了很多的動畫效果，體驗頁面很方便。

Hover.css

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

Hover.css提供了大量hover時的動畫效果。

CSShake

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

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

Hakim.se

http://hakim.se/

這是Reveal.js的作者Hakim El Hattab的個人網站，上面有很多交互和CSS動畫的demo，項目大多是開源的。

Typed.js

http://www.mattboldt.com/demos/typed-js/

在你的頁面上添加一個打字機效果。雖然用js很容易實現，但這個要更完善，有更多的自定義選項。

二、創(chuàng)意

404頁面

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

三、工具

Instafavicon

https://instafavicon.com

項目要展示了，少不了一個favicon。這個網站可以幫你快速生成一個簡潔美觀的站點圖標。

favico.js

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

Github Page Generator

做好了Demo，你可以用Github提供的介紹頁生成器生成一個漂亮的項目介紹頁。上圖是上一個實踐項目的項目介紹頁。

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

四、掛件

Github Ribbon

很多開源項目都會在網頁的邊角放一個這樣的Github ribbon。

Flask Badge

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

當前標題：如何讓你的Web項目漂亮、有趣！
當前網址：http://muchs.cn/news/167775.html

成都網站建設公司_創(chuàng)新互聯，為您提供域名注冊、網站內鏈、虛擬主機、定制網站、App設計、品牌網站制作

廣告

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