网页css js 抓取助手(在线版的CSS3代码生成工具，你get到了吗？)

　　网页css js 抓取助手(在线版的CSS3代码生成工具，你get到了吗？)

　　来自：南瓜编程公众号

　　我们整理了25个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，还有一些资源网站，希望有可以帮到大家！

　　▍CSS相关

　　●1

　　CSSBattle-在线 CSS 大赛

　　Competition CSS Online，一款非常有趣的竞技游戏，共12个关卡，要求你使用HTML和CSS来100%还原它给出的页面，然后最小化代码，你也可以查看全球排行榜，看看解决办法。

　　

　　●2

　　学习 CSS 布局 - 学习 CSS 布局

　　在线CSS布局学习，将引导初学者逐步学习CSS的基础知识，帮助初学者在实践中掌握CSS布局知识，提高初学者的CSS书写习惯和正确方法。

　　

　　●3

　　Flexbox Froggy - 一个学习Flex布局的小游戏

　　一个引导学习flex布局的游戏，用flex布局让青蛙跳到荷叶上就完成了，游戏收录了几乎所有常用的属性，很好学，形象好记，谁是Flex如果对布局不熟悉，这里多练习一下。

　　

　　●4

　　EnjoyCSS-在线 CSS 代码可视化工具

　　CSS3代码生成工具在线版，基于可视化操作，可以在非编码环境下快速调整网页效果和图形样式。就像在本地使用 PS 或 AI 软件一样。

　　

　　●5

　　CSS-Tricks-CSS 技巧

　　此网站 会不断更新，提供一些关于 CSS 技术的优秀教程和技巧，每天更新文章。

　　

　　●6

　　新拟态——实现新的模仿效果

　　可以轻松实现新的模仿效果，不仅可以修改颜色或填充颜色值，还可以修改大小、半径、距离、强度、模糊效果、形状等参数，并提供CSS可以直接复制的代码。

　　

　　●7

　　uiGradients-分享渐变

　　一个提供渐变色效果的网站，有近百种渐变色方案，可以根据自己的风格选择搭配，直接获取渐变色对应的CSS代码。

　　

　　▍JS相关

　　●8

　　JavaScript 秘密花园

　　一个不断更新的JavaScript语法文档，主要写如何避免一些常见的错误，以及寻找难以发现的Bug，深入了解JavaScript的语言特性。

　　

　　●9

　　JSTips-JS 技巧

　　每天都有一点 Javascript 知识。

　　

　　●10

　　JSweekly - 科技周刊

　　每周专门讨论 Javascript 的技术期刊。

　　

　　●11

　　CDNJS - JavaScript 库

　　CDNJS 为开发者提供最新的前端网页开发资源，免费使用，不受限制。您可以在自己的网页上直接引用这些 JS 文件。进入CDNJS网站后，搜索你要的资源库，找到，点击项目后面的【复制脚本标签】，粘贴即可使用。目前CDNJS在Web前端的CDN服务中排名第二（第一是Google），性能优异。

　　

　　●12

　　Beautiful Open - 开源 JS 库合集

　　采集各种设计优秀的开源项目，从cms内容管理系统到常用的Javascript库，适合网站开发的用户使用。

　　

　　●13

　　JavaScript Fun - 代码库集合

　　目前最流行的 JavaScript 代码库合集，展示人气排名，开发者可以轻松找到最新的代码插件、工具和博客。

　　

　　▍社区和博客

　　●14

　　Stack Overflow - 程序员问答网络

　　全球 IT 社区中最受欢迎的技术问答之一网站，一个用于解决错误的社区，被称为“编程的 100,000 个为什么”。

　　

　　●15

　　掘金 - 优质技术社区

　　掘金技术社区是一个优质的技术分享社区，由技术专家和极客编辑筛选的优质干货。这些技术文章包括Android、iOS、前端和后端资源。

　　

　　●16

　　Codrops - 网页设计和开发博客

　　发布技术文章和网络教程，提供经验，避免陷阱，资源丰富。许多优秀的技术都来自这里。

　　

　　▍在线IDE

　　●17

　　代码笔

　　一个网站前端设计开发平台，一个网站前端代码的工具，上面有各种效果的案例特效（炫技），可以自己开发基于他们的演示设计的前端。

　　

　　●18

　　代码沙盒

　　顾名思义，CodeSandBox 网站 提供了一个在线开发环境的“沙盒”。 React、Vue、Angular等主流框架开箱即用，实时编译预览，非常方便。

　　

　　●19

　　JSBin

　　又一款轻量级在线编辑器网站，界面简洁干净，如果临时想调试简单的HTML或者JS代码，可以在这里试试。

　　

　　▍资源

　　● 20

　　ICONSVG-在线定制设计SVG图标素材

　　是一款在线定制设计的SVG图标素材网站，帮助前端设计师找到想要的图标素材。这些图标素材都是常用的图标，可以点击官方提供的素材进行二次设计。同时还可以导出设计好的图标。

　　

　　●21

　　OpenMoji - 免费表情符号库

　　提供源码表情库，免费下载使用。

　　

　　● 22

　　分享图标 - 免费矢量素材库

　　提供超过250,000种ICON矢量图素材，120多个类别，所有素材均以PNG和SVG格式提供，素材有512*512、256*25等多种尺寸可供选择6、128*128、64*64、32*32、16*16等，非常适合前端设计师采集和储备。

　　

　　● 23

　　tableconvert - 在线表格编辑器

　　强大的在线表格编辑器，支持Excel、Markdown、JSON、CSV、HTML等格式的转换。当您需要转换表格，但又无法使其变形时，请尝试使用此工具。

　　

　　● 24

　　Feathericons - 极简图标图标集

　　一个免费开源的简单漂亮的ICON图标集合，主要针对应用系统、媒体控制、位置、天气、箭头、标志等设计，可用于移动应用开发，图标格式为SVG。

　　

　　● 25

　　HTML5 + CSS 3 免费模板

　　提供大量HTML5模板，用户可以自己分享和修改模板。

　　

　　本文推荐网站总结：

　　CSSbattle：

　　学习 CSS 布局：

　　Flexbox Froggy：

　　享受CSS：

　　CSS 技巧：

　　新拟态：

　　uiGradients：

　　JavaScript：

　　JS 提示：

　　JS 周刊：

　　CDNJS：

　　美丽的开放：

　　JavaScript 乐趣：

　　堆栈溢出：

　　掘金队：

　　Codrops：

　　代码笔：

　　代码沙盒：

　　JS斌：

　　图标：

　　OpenMoji：

　　分享图标：

　　表格转换：

　　羽毛图标：

　　HTML5UP：