前端实用的小网站
前言
在前端制作网页的过程中,可以在很大的程度上提高效率。
All
- 渐变图素材 https://webgradients.com/
- 美化图标素材 http://www.fontawesome.com.cn/
- 热铁盒虚拟主机 https://rthe.cn/
- 小巧便捷的图床 https://postimages.org/
- 颜色配色 https://flatuicolors.com/
- 中国色 http://zhongguose.com/
- 阿里的矢量图标库 https://www.iconfont.cn/
- jQuery插件库 http://www.jq22.com/
- 爱给网(音效) http://www.aigei.com/
- CSS特效 https://codepen.io/
- 颜色配色(二) https://colorhunt.co/
- 临时电子邮箱 https://temp-mail.org/zh
- Vue render https://vuejs-tips.github.io/compiler/#inline-template
- processOn(免费在线作图) https://processon.com/
- Table Generator(表格生成) http://www.tablesgenerator.com/html_tables
1.渐变色素材
我们平时在写背景色,文本框颜色以及按钮颜色的时候,如果只是一个纯色的话,就会显得十分的单调,这时候,我们就会想到,那么用一个渐变色来代替是不是就会十分的好看呢?
但用CSS3自己进行渐变色的编写其实也是十分的麻烦的。
CSS3的渐变主要有两个类型:线性渐变和径向渐变。
在这里我们就可以去使用这个素材,由繁化简,使用的时候十分的方便。
使用方法:
我们直接在网站中选取自己想要的颜色样式,直接进行Copy Css,就可以直接复制Css样式了,然后直接添加到我们的项目中即可。 我们同样也可以在这里看到所属的渐变图究竟是什么颜色到什么颜色的渐变,都是一目了然的。
这里还可以进行PSD格式的导出,也是十分的人性化。 因此我们可以用素材这个来进行日常渐变图的处理。
2.美化图标素材
在日常进行图标的选取,会十分的麻烦,很难找到自己想要的一款小图标,在这里推荐一下这个美化图标的素材(Font Awesome)。 使用之前先要进行下载,下载也是直接在官网上进行下载即可。 下载完毕之后我们会得到一个Font Awesome的压缩包,将其解压,会得到一个文件夹,直接把文件夹放到自己的项目中,然后在head里面进行引用。
上面的工作都准备完毕以后就可以直接进行小图标的使用了。
我们可以直接进行图标的搜索,然后引入到自己的项目中,即可。 在这个网站中还有很多的好玩的东东,也可以自己进行探索。
3.热铁盒虚拟主机
这个东东是由一位B站的大佬开发的。( 杨尚臻2001 ) 免费的东西,咱就先不提性能怎么样,毕竟白嫖。 首先也是如QQ一样进行账号的登录,如果没账号也是可以进行申请的,十分的简单。 这里我已经创建了账号,就直接进行登录了。
之后我们就可以创建一个新主机。(**位置可以进行自定义)
创建之后我们就会看到一个404.html和index.html,这时候就可以输入我们之前创建的域名进行访问了。(白嫖的就是香!!!)
但人家毕竟要赚钱的嘛,当我们上传一张图片的时候就会提示我们要开通高级会员???我们白嫖党怎么可能去开会员呢?所以说就需要一个图床了,来存储我们的图片啦~~~ PS:学完这个之后咱就去搭一个 pilipili。
4.免费图片托管工具
这个网站真的是十分的好用,我们可以直接在自己本地进行图片的选取然后上传,就可以获取到图片的地址,然后引用到我们的项目中即可,就不需要进行本地图片的使用了。

我们在进行注册的时候,会生成一个随机的密码,一定要记住这个密码,不然以后就登不上了哦~
5.颜色配色
我们可以在这个素材中进行颜色的选取,以及中和自己的配色,同样也是直接进行copy即可获得颜色的代码。
在选取颜色的过程中也会有着清脆的音效声,也是十分的好听
6.中国色
喜欢中国古风元素的童鞋们有福了,这个网站里的颜色,和中国的古风古色都十分的相像,我们可以直接在网站中查看到颜色以及其属性。
来一个满江红,哈哈~
7.阿里的矢量图标库
这里面的图标可谓是非常的多了,我们可以对其进行颜色的修改,以及导出的格式的改正,还可以应用在MUI框架里进行使用。
也可以直接保存到自己的项目中进行引用。
8.jQuery插件库
我们可以直接在这个网站中,找到自己想要的jQuery的效果,然后进行下载,也是免费下载的哦~
还有常用的前端库的引用地址。
还可以看到一些常用的前端代码以及其效果展示。
9.音效网站(爱给网)
在这里我们能找到自己想要的一些音效的效果,也是十分好用的。
支持在线预览声音的效果。
10.在线编写CSS以及JavaScript的特效网站
我们可以在这个网站上面找到很多大神写的特效以及一些功能,而且可以直接看到CSS,HTML,JavaScript代码的编写以及效果图的展示,也是对小白十分的友好。
11.颜色配色(二)
这个和上面的颜色配色大同小异,基本上都是差不多的。直接演示~
12.临时电子邮箱(Temp Mail)
正如这个网站所述: 不用再担心垃圾邮件,广告邮件,黑客和机器人攻击。让您真实的邮箱保持干净和安全。
Temp Mail提供临时、安全、匿名、免费的一次性电子邮件地址。 我们可以在注册某些软件的时候,需要进行电子邮箱的注册,这时候临时电子邮箱就发挥出了很大的作用。
13. Vue render
可以将vue编译为JavaScript的工具。
可以快速查看一些内置指令在 render 函数中是如何编写的 。
14.processOn(免费在线作图)
免费在线作图、实时协作。
支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等。
ProcessOn是一个在线作图工具的聚合平台, 它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等。 您无需担心下载和更新的问题,不管Mac还是Windows,一个浏览器就可以随时随地的发挥创意,规划工作。
15. Table Generator(表格生成)
只要像在 Excel 一样拽拉合并就可以直接生成 HTML 代码,顿时提高了百倍工作效率。
另外除了 HTML,它还支持:LaTeX、Text、Markdown等 。
个人博客:iybai.cn