进入Frozen UI官网，我们看到：
官网
从官网上看，我们可以看到浓浓的“腾讯系”风格。
我们下载了Frozen UI源码包，她是基于zepto的JS框架！
从快速开始上,我们按照老例，写个“Hello Word”。我用的是PHPstorm编辑器，由于我是PHP开拓者嘛。
<!DOCTYPE html><html><head> <meta charset=\"大众utf-8\"大众> <meta name=\"大众viewport\"大众 content=\公众initial-scale=1, maximum-scale=1, user-scalable=no\"大众> <meta name=\公众format-detection\"大众 content=\"大众telephone=no\公众> <title>“冰雪缘”头条评测frozen ui</title> <link rel=\"大众stylesheet\"大众 href=\"大众dist/css/frozen.css\公众></head><body><header class=\公众ui-header ui-header-positive ui-border-b\"大众> <i class=\"大众ui-icon-return\"大众 onclick=\"大众history.back()\"大众></i><h1>hello Word</h1><button class=\"大众ui-btn\公众>回顾页</button></header><footer class=\"大众ui-footer ui-footer-btn\"大众> <ul class=\"大众ui-tiled ui-border-t\"大众> <li data-href=\"大众#\"大众 class=\公众ui-border-r\公众><div>底部菜单</div></li> <li data-href=\公众#\公众 class=\"大众ui-border-r\公众><div>底部菜单</div></li> <li data-href=\"大众#\"大众><div>底部菜单</div></li> </ul></footer><section class=\公众ui-container\"大众> <h1>Hello Word</h1></section><script src=\"大众dist/lib/zepto.min.js\公众></script><script src=\"大众dist/js/frozen.js\"大众></script><script>(function (){})();</script></body></html>
可以看到的是，利用Frozen UI须要包含
frozen.css
zepto.min.js
frozen.js
等三个文件。我们预览下结果
结果
咳咳，浓浓的腾讯风啊……不过设计还没得挑剔。
Frozen UI包括根本样式，如下：
文本
布局
网格
占位
1px办理方案
箭头链接
笔墨截断
两端留白
两端对齐
所有图标
我们试试图标吧。
<!DOCTYPE html><html><head> <meta charset=\公众utf-8\公众> <meta name=\公众viewport\公众 content=\"大众initial-scale=1, maximum-scale=1, user-scalable=no\"大众> <meta name=\"大众format-detection\"大众 content=\"大众telephone=no\"大众> <title>“冰雪缘”头条评测frozen ui</title> <link rel=\"大众stylesheet\"大众 href=\公众dist/css/frozen.css\"大众></head><body><header class=\"大众ui-header ui-header-positive ui-border-b\"大众> <i class=\"大众ui-icon-return\公众 onclick=\"大众history.back()\"大众></i><h1>hello Word</h1><button class=\"大众ui-btn\"大众>回顾页</button></header><footer class=\"大众ui-footer ui-footer-btn\公众> <ul class=\"大众ui-tiled ui-border-t\"大众> <li data-href=\公众#\"大众 class=\"大众ui-border-r\公众><div>底部菜单</div></li> <li data-href=\"大众#\"大众 class=\"大众ui-border-r\公众><div>底部菜单</div></li> <li data-href=\公众#\公众><div>底部菜单</div></li> </ul></footer><section class=\"大众ui-container\"大众> <ul style=\"大众margin: 1rem 0 0 1rem\公众> <li> <i class=\"大众ui-icon-checked\"大众></i> </li> <li> <i class=\"大众ui-icon-add\"大众></i> </li> </ul></section><script src=\"大众dist/lib/zepto.min.js\"大众></script><script src=\"大众dist/js/frozen.js\"大众></script><script>(function (){})();</script></body></html>
运行结果：
运行结果
我们来看看UI组件，包括：
按钮
面板
头像
红点
徽标
标签
角标
搜索框
列表
表单
表格
关照
普通提示
工具提示
新提示
浮层提示
选择器
进度条
加载中
菜单
对话框
选项卡
轮播图
vip
我们来试试“红点”组件吧
<!DOCTYPE html><html><head> <meta charset=\公众utf-8\公众> <meta name=\"大众viewport\"大众 content=\"大众initial-scale=1, maximum-scale=1, user-scalable=no\公众> <meta name=\"大众format-detection\"大众 content=\公众telephone=no\"大众> <title>“冰雪缘”头条评测frozen ui</title> <link rel=\"大众stylesheet\"大众 href=\"大众dist/css/frozen.css\"大众></head><body><header class=\公众ui-header ui-header-positive ui-border-b\公众> <i class=\公众ui-icon-return\"大众 onclick=\"大众history.back()\"大众></i><h1>hello Word</h1><button class=\"大众ui-btn\"大众>回顾页</button></header><footer class=\"大众ui-footer ui-footer-btn\"大众> <ul class=\公众ui-tiled ui-border-t\"大众> <li data-href=\"大众#\公众 class=\"大众ui-border-r\"大众><div>底部菜单</div></li> <li data-href=\"大众#\"大众 class=\公众ui-border-r\公众><div>底部菜单</div></li> <li data-href=\公众#\"大众><div>底部菜单</div></li> </ul></footer><section class=\"大众ui-container\"大众 style=\"大众margin: 1rem 0 0 1rem\公众> <div class=\公众ui-reddot\"大众>内容内容</div> <div class=\"大众ui-reddot-border\"大众>内容内容</div> <div class=\"大众ui-reddot-s\"大众>内容内容</div> <div class=\公众ui-center-hor\"大众>内容内容<i class=\"大众ui-reddot ui-reddot-static\"大众></i></div></section><script src=\公众dist/lib/zepto.min.js\"大众></script><script src=\"大众dist/js/frozen.js\"大众></script><script>(function (){})();</script></body></html>
预览：
运行结果
还有JS部分，包括：
Core
Tap
Dialog
Loading
Scroller
Slider
Tab
Tips
Cover
Parallax
我们以Dialog为例，评测一下
<!DOCTYPE html><html><head> <meta charset=\"大众utf-8\"大众> <meta name=\"大众viewport\公众 content=\"大众initial-scale=1, maximum-scale=1, user-scalable=no\"大众> <meta name=\"大众format-detection\公众 content=\"大众telephone=no\"大众> <title>“冰雪缘”头条评测frozen ui</title> <link rel=\"大众stylesheet\"大众 href=\"大众dist/css/frozen.css\公众></head><body><header class=\公众ui-header ui-header-positive ui-border-b\公众> <i class=\"大众ui-icon-return\"大众 onclick=\"大众history.back()\"大众></i><h1>hello Word</h1><button class=\公众ui-btn\"大众>回顾页</button></header><footer class=\"大众ui-footer ui-footer-btn\"大众> <ul class=\"大众ui-tiled ui-border-t\"大众> <li data-href=\"大众#\公众 class=\"大众ui-border-r\"大众><div>底部菜单</div></li> <li data-href=\"大众#\"大众 class=\公众ui-border-r\"大众><div>底部菜单</div></li> <li data-href=\公众#\"大众><div>底部菜单</div></li> </ul></footer><section class=\公众ui-container\"大众 style=\"大众margin: 1rem 0 0 1rem\"大众> <div class=\"大众ui-btn\公众 id=\"大众btn1\"大众>这是dialog</div></section><script src=\公众dist/lib/zepto.min.js\"大众></script><script src=\"大众dist/js/frozen.js\公众></script><script>(function (){$(\"大众#btn1\"大众).click(function(){var dia=$.dialog({title:'温馨提示',content:'温馨提示内容',button:[\"大众确认\"大众,\"大众取消\公众]});dia.on(\公众dialog:action\"大众,function(e){console.log(e.index)});dia.on(\公众dialog:hide\"大众,function(e){console.log(\"大众dialog hide\"大众)});})})();</script></body></html>
运行结果：
Dialo
Frozen UI框架还是不错的，有的设计职员说腾讯系已经让人有了审美疲倦，你们认为呢？
