對於前端小白(例如：專注後端代碼N年的攻城獅)，自己編寫一個漂亮的Web登錄頁面似乎在設計上有些捉襟見肘，不懂UI設計，顏色搭配極度的混亂(主色，輔助色，配色，色彩漸變，動畫效果等等,看起來一堆亂七八糟的東西)。如果你對前端設計一知半解，又想自己動手寫一個不錯的頁面，可以看看本文提供的快捷方式。

提示：本次文章的原始碼和視頻教程已附在文章最後

序言

對於長期搞後端開發的人員，想要自己動手去寫一個漂亮的(看上去還能接受)的Web頁面，首頁面臨的第一大難題是素材，很有多站點提供有現成的圖片資源，以及現成的Web頁面模板，但這些資源不是在配色上無法滿足自己的需求，就是代碼過於繁瑣，需要加載很多第三方的插件（例如：Bootstrap,jQuery,xxx-plugin等等），導致一個很小的頁面也需要加載很多的資源，體驗性不好，改寫也比較麻煩(可讀性差)。基於這樣的原因，今天在這裡分享一下自己寫Web頁面的一些經驗(我是一名後端工程師)。

圖片資源

在網上，你可以找到很多漂亮的素材圖片，但它們大多數都因為版權的原因導致你不能隨意使用，另外對於很少使用UI設計工具的開發人員來說，在拿到授權圖片後，想要局部修改也是一件不容易的事情。針對這個問題，我在這裡分享一個比較好的免費圖片資源網站(SVG格式)：https://undraw.co/ 。它是一個開源的插圖網站，你可以完全免費使用網站上的圖片，而不需要註明出處。

undraw的宗旨是幫助你設計更好的網站，產品和應用程式。在undraw中找到適合你產品的圖形，然後可以根據你的意願自定義圖片的配色，最後根據實際需要，可以將圖片以PNG/JPG/SVG等格式下載到本地使用。下面是undraw.co網站的部分截圖：

圖標資源

在一個網頁中，往往在很多地方需要一些小圖標來輔助交互工作。對於頁面小圖標，阿里巴巴圖標庫是一個不錯的選中，你可以在該網站上找到你想要的圖標並根據實際情況下載你想要的文件類型。下面是阿里巴巴圖標庫官方截圖：

如果你不想在項目中引入過多的圖片資源，你還可以使用BootstrapCDN提供的fontawesome，可以進一步壓縮項目空間，提高頁面加載速度(我個人比較偏向於使用fontawesome CDN加速連結)。

工具

編寫代碼，我們需要一款稱手的代碼編輯工具，例如比較受歡迎的Atom，HBuilder，Sublime，WebStrom等等。工具因人而異，自己用著比較爽即可（我個人偏向於使用WebStrom）。

ATOM官網地址：https://atom.io/

HBuilder官網地址：https://www.dcloud.io/hbuilderx.html

Sublime官網地址：https://www.sublimetext.com/

WebStrom官網：https://www.jetbrains.com/webstorm/

插件（Plugins）

如果你只是像本教程一樣，寫一個簡單漂亮的Web登錄介面，完全沒有比較加載像jQuery，Bootstrap這樣的第三方插件，原生的JavaScript和CSS3已經足以(保持項目體積的最小化)。

課程資源

由於篇幅原因，已經將本次文章內容製作成課程視頻，你可以點擊下方的連結地址查看更多的詳細信息，看看如何在十分鐘打造一個爆款Web響應式登錄介面。如果您覺得本文對你有所幫助，歡迎點讚/收藏/分享三連擊。