为了提升技术一定要学会使用这两个在线网站!-前端范

为了提升技术一定要学会使用这两个在线网站!

免费开源HTML5跨屏框架

链接:http://zui.sexy/

「ZUI」是一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用,专门为移动端设计,基于 Flex 设计,支持移动端全部主流浏览器,支持 Android 微信内置浏览器。独立的外观选项,适合大部分控件,满足多样的外观定制需求。

「ZUI」功能特色:

1、简单易用,快速构建美观的现代 Web 应用;

2、轻量级高性能,只包含关键功能特性,但具备高可扩展性,只让你的应用更快;

3、跨平台支持,多屏幕响应;最大限度的利用现代浏览器特性,但也支持 IE8 等古老的浏览器;

4、完整方案,内置大量实用第三方组件,并进行了优化,适用大部分 Web 应用的开发;

5、易于定制,有多个版本供选择,主要版本包含大部分特性,额外的内容按需加载。

ZUI(当前版本 v1.8.1) 提供了多种方式让你快速上手。你可以根据自己的需要选择合适的使用方式,提供了ZUI 生产包和ZUI 源码,也可以通过通过 npm 或Bower 安装获取 ZUI 的生产文件及完整源码。

 

可视化CSS样式辅助工具 

链接:https://csspeeper.com/

“CSSPeeper”是还一个基于浏览器端的CSS样式分析扩展插件,如果你是设计师、需要时常去浏览其他网站的话,应该会觉得它几乎为你量身打造,想要分析目标网站的CSS代码,仅仅用谷歌开发模式是不够的,因此有了这款插件你会如虎添翼。

CSSPeeper使用方法:

浏览器上安装插件以后,开启CSS Peeper的Google Chrome扩充功能页面,点选右上角「加到Chrome」按钮免费下载安装,安装后浏览器右上角会出现CSS Peeper按钮,点选就能使用。点选CSSPeeper 后会开启网站图示、标题和内文字型、CSS 档案大小和载入时间,点选下方按钮可切换至不同功能。

CSSPeeper让使用者以简单、有组织性、更漂亮方式去检查网站样式和各种元件,例如以视觉化方式快速列出网站的配色、查看各部分使用的字型、字体大小、行高、对齐方向和颜色,还能快速汇出页面中的所有图片。

最后CSSPeeper 还有一个查看网页中所有图片的功能,能在下拉功能中显示所有网页图片,将游标移动到缩图会显示图片档名和尺寸,也能单独汇出或一次汇出。

当你在CSSPeeper 开启情况下点选网页中的文字、链结、栏位或按钮,就会侦测出该元件的样式名称、长宽、字型、字体大小、行高、对齐方向及颜色等资讯,对于想知道网页中某个元件的属性非常方便。

CSSPeeper 在操作上跟Fontface Ninja 感觉很类似,不过可以查看各元件的「Inspector」功能非常实用!只要在开启CSSPeeper 情况下去点击网页内的元件,就能以可视化方式浏览它各项资讯与设定值,相较于Google Chrome 内建的Inspector 来说会更直觉。

 

本次分享为自己一直在用的两个网站,不做任何性质的宣传,如有违反平台规定,还请管理员提醒并进行删除,谢谢!

未经允许不得转载:前端范 » 为了提升技术一定要学会使用这两个在线网站!

赞 (2)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址