对于前端小白(例如：专注后端代码N年的攻城狮)，自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘，不懂UI设计，颜色搭配极度的混乱(主色，辅助色，配色，色彩渐变，动画效果等等,看起来一堆乱七八糟的东西)。如果你对前端设计一知半解，又想自己动手写一个不错的页面，可以看看本文提供的快捷方式。

提示：本次文章的源代码和视频教程已附在文章最后

序言

对于长期搞后端开发的人员，想要自己动手去写一个漂亮的(看上去还能接受)的Web页面，首页面临的第一大难题是素材，很有多站点提供有现成的图片资源，以及现成的Web页面模板，但这些资源不是在配色上无法满足自己的需求，就是代码过于繁琐，需要加载很多第三方的插件（例如：Bootstrap,jQuery,xxx-plugin等等），导致一个很小的页面也需要加载很多的资源，体验性不好，改写也比较麻烦(可读性差)。基于这样的原因，今天在这里分享一下自己写Web页面的一些经验(我是一名后端工程师)。

图片资源

在网上，你可以找到很多漂亮的素材图片，但它们大多数都因为版权的原因导致你不能随意使用，另外对于很少使用UI设计工具的开发人员来说，在拿到授权图片后，想要局部修改也是一件不容易的事情。针对这个问题，我在这里分享一个比较好的免费图片资源网站(SVG格式)： 。它是一个开源的插图网站，你可以完全免费使用网站上的图片，而不需要注明出处。

undraw的宗旨是帮助你设计更好的网站，产品和应用程序。在undraw中找到适合你产品的图形，然后可以根据你的意愿自定义图片的配色，最后根据实际需要，可以将图片以PNG/JPG/SVG等格式下载到本地使用。下面是undraw.co网站的部分截图：

图标资源

在一个网页中，往往在很多地方需要一些小图标来辅助交互工作。对于页面小图标，阿里巴巴图标库是一个不错的选中，你可以在该网站上找到你想要的图标并根据实际情况下载你想要的文件类型。下面是阿里巴巴图标库官方截图：

如果你不想在项目中引入过多的图片资源，你还可以使用BootstrapCDN提供的fontawesome，可以进一步压缩项目空间，提高页面加载速度(我个人比较偏向于使用fontawesome CDN加速链接)。

工具

编写代码，我们需要一款称手的代码编辑工具，例如比较受欢迎的Atom，HBuilder，Sublime，WebStrom等等。工具因人而异，自己用着比较爽即可（我个人偏向于使用WebStrom）。

ATOM官网地址：

HBuilder官网地址：

Sublime官网地址：

WebStrom官网：

插件（Plugins）

如果你只是像本教程一样，写一个简单漂亮的Web登录界面，完全没有比较加载像jQuery，Bootstrap这样的第三方插件，原生的JavaScript和CSS3已经足以(保持项目体积的最小化)。

课程资源

由于篇幅原因，已经将本次文章内容制作成课程视频，你可以点击下方的链接地址查看更多的详细信息，看看如何在十分钟打造一个爆款Web响应式登录界面。如果您觉得本文对你有所帮助，欢迎点赞/收藏/分享三连击。

《前端小白如何在10分钟内打造一个爆款Web响应式登录界面？》头条视频教程