前端工程师必备实用网站

谁践踏了优雅 2022-04-10 02:57 329阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

### 一、配色类网站 ###

> [http://colorhunt.co][http_colorhunt.co]

这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。

![Image 1][]

> [https://webgradients.com/][https_webgradients.com]

180种渐变方案供你选择，还可以直接复制CSS样式应用到网页中

![Image 1][]

> [https://color.adobe.com/zh/create/color-wheel][https_color.adobe.com_zh_create_color-wheel]

这个是Adobe公司出的，他提供了多种配色方案。我们点击圆盘中间的点，就可以调整出我们想要的配色方案。

![Image 1][]

> [http://www.colorhunter.com/][http_www.colorhunter.com]

这是一个提取现有图片配色方案的工具。我们上传一张图片，它就会帮我们把图片的配色提取出来供我们使用。

![Image 1][]

> [http://www.bootcss.com/p/websafecolors/][http_www.bootcss.com_p_websafecolors]

这个网站是为WEB设计，开发中经常用到的安全色。网站内列出了颜色的十六进制码和RGB码，复制粘贴就可以了。

![Image 1][]

> [http://www.sioe.cn/yingyong/yanse-rgb-16/][http_www.sioe.cn_yingyong_yanse-rgb-16]

这是一个在线RGB和十六进制颜色码转换工具。在对应的位置填入十六进制代码，点击转换，我们就可以获取到RGB颜色的代码了。

![Image 1][]

### 二、图标类网站 ###

> [http://www.iconfont.cn/plus][http_www.iconfont.cn_plus]

这是阿里巴巴旗下的图标库网站，直接搜索关键词就可以找到大批的图标。下载图标的时候我们还可以选择颜色、大小、格式，根据自己的需要下载就好了。

![Image 1][]

> [http://www.easyicon.net/iconsearch/ios/][http_www.easyicon.net_iconsearch_ios]

这也是一个非常有名的图标库，与上面那个不同的是，这里的图标不是单一颜色的，而是设计好的颜色。下载图标也很简单，直接点击对应图标上面的格式就可以下载。

![Image 1][]

> [http://www.thinkcmf.com/font/search.html][http_www.thinkcmf.com_font_search.html]

奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。

![Image 1][]

### 三、插件类网站 ###

> [http://www.jq22.com/][http_www.jq22.com]

这个网站分享jQuery插件和提供各种jQuery特效的详细使用方法,在线预览,jQuery插件下载及教程

![Image 1][]

> [http://www.htmleaf.com/][http_www.htmleaf.com]

这个网站与上一个网站类似，也提供了大量的jQuery插件

![Image 1][]

> [http://www.layui.com/][http_www.layui.com]

这是一个强大的模块化前端框架

![Image 1][]

> [http://www.h-ui.net/index.shtml][http_www.h-ui.net_index.shtml]

H-ui前端框架，一个轻量级前端框架，简单免费，兼容性好，服务中国网站。

![Image 1][]

### 四、素材类网站 ###

> [http://588ku.com/][http_588ku.com]

千库网，一个免费下载图片素材的网站

![Image 1][]

> [https://unsplash.com/][https_unsplash.com]

[Unsplash][https_unsplash.com]是一个分享免费高质量照片的网站，照片分辨率都挺大，而且都是真实的摄影师作品，图片多是风景和静物。

![Image 1][]

### 五、字体类网站 ###

> [http://www.youziku.com/onlinefont/index][http_www.youziku.com_onlinefont_index]

有字库，一个免下载字体，直接在线引用字体的网站。

![Image 1][]

> [http://www.psjia.com/pssc/fontxz/list\_18\_3.html][http_www.psjia.com_pssc_fontxz_list_18_3.html]

PS字体库，包含了几乎所有类型的字体，下载好安装，PS中就可以使用了。

![Image 1][]

### 六、工具类 ###

> [http://tool.lu/][http_tool.lu]

一个在线工具网站，包含大量在线工具

![Image 1][]

> [http://www.xueui.cn/design/online-tools][http_www.xueui.cn_design_online-tools]

方便好用的UI设计工具合集

![Image 1][]

> [https://tinypng.com/][https_tinypng.com]

一个在线图片压缩工具，可以批量使用

![Image 1][]

yasuo.png

> [http://www.css88.com/][http_www.css88.com]

各种前端类工具和技术文章

![Image 1][]

css88.png

## 七、UI框架 ##

> [http://element-cn.eleme.io/\#/zh-CN/component/typography][http_element-cn.eleme.io_zh-CN_component_typography]

Element UI 是一套为开发者、设计师和产品经理准备的开源组件库。

![Image 1][]

WX20181024-131814.png

> [https://muse-ui.org/\#/zh-CN][https_muse-ui.org_zh-CN]

基于 Vue 2.0 优雅的 Material Design UI 组件库

![Image 1][]

WX20181024-132214.png

> [https://youzan.github.io/vant/\#/zh-CN/intro][https_youzan.github.io_vant_zh-CN_intro]

轻量、可靠的移动端 Vue 组件库

![Image 1][]

WX20181024-132635.png

> [http://amazeui.org/][http_amazeui.org]

中国首个开源 HTML5 跨屏前端框架

![Image 1][]

> [http://sui.taobao.org/sui/docs/][http_sui.taobao.org_sui_docs]

SUI 是一套基于bootstrap开发的前端组件库

![Image 1][]

> [https://github.com/iview/iview-admin][https_github.com_iview_iview-admin]

iView admin是基于Vue.js，搭配使用[iView][] UI组件库形成的一套后台集成解决方案

## 【强力推荐】 ##

![Image 1][]

作者：IT青年  
链接：https://www.jianshu.com/p/53a7da454057

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[http_colorhunt.co]: http://colorhunt.co
[Image 1]: 
[https_webgradients.com]: https://webgradients.com/
[https_color.adobe.com_zh_create_color-wheel]: https://color.adobe.com/zh/create/color-wheel
[http_www.colorhunter.com]: http://www.colorhunter.com/
[http_www.bootcss.com_p_websafecolors]: http://www.bootcss.com/p/websafecolors/
[http_www.sioe.cn_yingyong_yanse-rgb-16]: http://www.sioe.cn/yingyong/yanse-rgb-16/
[http_www.iconfont.cn_plus]: http://www.iconfont.cn/plus
[http_www.easyicon.net_iconsearch_ios]: http://www.easyicon.net/iconsearch/ios/
[http_www.thinkcmf.com_font_search.html]: http://www.thinkcmf.com/font/search.html
[http_www.jq22.com]: http://www.jq22.com/
[http_www.htmleaf.com]: http://www.htmleaf.com/
[http_www.layui.com]: http://www.layui.com/
[http_www.h-ui.net_index.shtml]: http://www.h-ui.net/index.shtml
[http_588ku.com]: http://588ku.com/
[https_unsplash.com]: https://unsplash.com/
[http_www.youziku.com_onlinefont_index]: http://www.youziku.com/onlinefont/index
[http_www.psjia.com_pssc_fontxz_list_18_3.html]: http://www.psjia.com/pssc/fontxz/list_18_3.html
[http_tool.lu]: http://tool.lu/
[http_www.xueui.cn_design_online-tools]: http://www.xueui.cn/design/online-tools
[https_tinypng.com]: https://tinypng.com/
[http_www.css88.com]: http://www.css88.com/
[http_element-cn.eleme.io_zh-CN_component_typography]: http://element-cn.eleme.io/#/zh-CN/component/typography
[https_muse-ui.org_zh-CN]: https://muse-ui.org/#/zh-CN
[https_youzan.github.io_vant_zh-CN_intro]: https://youzan.github.io/vant/#/zh-CN/intro
[http_amazeui.org]: http://amazeui.org/
[http_sui.taobao.org_sui_docs]: http://sui.taobao.org/sui/docs/
[https_github.com_iview_iview-admin]: https://github.com/iview/iview-admin
[iView]: https://www.iviewui.com/
[2018121912254161]: /images/20220403/0b5302310711405b923fddd888e1632c.png