讓你的Web項目好看起來！

簡單和好看，兩個都要

想起來剛學Python的時候，學了很長時間還是在黑黑的窗口裡輸出字元，感覺很沒勁。用Tkinter做了第一個GUI窗口時，雖然顯示的都是「Hello，World」，卻感覺這個要漂亮多了（膚淺！）。後來學Web開發，發現CSS真讓人頭疼，別人網站上的一個小效果就要查半天才能實現。簡單和好看，總是走不到一起，直到發現了Bootstrap，世界美好了。

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

好看很重要

長相天生，項目的外觀卻由你決定。儘管不是自己實現的效果，但看到自己的APP美觀大方，你會不顧一切的在腦子裡形成一個「我創造了美好的事物」的念頭，由此帶來的巨大的成就感會激勵你繼續學習（和自戀）下去。而且，你的外行朋友們會對你一臉崇拜~

我想大家對Bootstrap應該很熟悉了，但是因為它太流行了，很多人照著《Flask Web開發》做出來的博客從功能到外表，全都一個模樣……

那麼，我就來推薦三個不同風格的優秀的CSS框架。

Materialize —— Material Design風格

Documentation - Materialize

Google（https://design.google.com）在2014年推出了一個設計語言——Material Design（譯作「原質化設計」，「質感設計」或是「原質設計」），代號是Quantum Paper(量子紙）。看看下面這張圖片你就明白了，這些卡片和圓形懸浮按鈕你肯定不陌生：

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

這是使用Bootstrap的頁面：

Semantic-UI —— 語義化

Semantic UI

Semantic-UI是一個語義化的前端框架，因為它是圍繞自然語言架構的，所以使用起來也很方便。看看下面這個例子你就可以理解它的語義化特點了：

<button class="btn btn-primary btn-large">Hello!</button>

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

<button class="ui blue button large">Hello!</button>

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

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

Pure —— 輕量級

Pure

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

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

網頁背景圖片

順便推薦兩個網頁背景網站。

背景紋理：https://subtlepatterns.com/

第一個網站提供了很多好看的紋理圖片（數量更多和質量更好）：

透明紋理+自定義顏色：https://www.transparenttextures.com/

後一個網站提供了很多透明紋理，你可以自定義背景顏色，且支持定製不同設備的壁紙：

快動手讓你的Web項目變漂亮一點吧，下次談談怎麼讓你的Web項目變得有趣起來。

- - - - -

更多關於Flask和Web開發的優質原創內容，歡迎關注Hello, Flask! - 知乎專欄。

推薦閱讀：