Web开发第三方工具使用案例

IconFont 阿里图标库

使用图标可以可以为页面增色，用字体图标替代图形图标可以简化开发，避免图片与文字的对齐问题，提高用户体验。IconFont资源丰富，品质较高，支持通过font-class，Systrm等方式使用图标，且提供了项目管理功能，创建项目后，挑选图标并加入项目，即可生成不同调用方式的CDN静态资源。

/*
代码片段：在项目中用使用Symbol引用IconFont图标表示会员等级(已简化) 
使用Symbol引用方式是因为其使用方便且支持多色图标
详见http://www.iconfont.cn/plus/help/detail?helptype=code
*/
//引入由IconFont生成的通过Symbol引用使用图标所需的的js(CDN地址)
<script src="//at.alicdn.com/t/font_y51rubtj57mn29.js"></script>
//加入通用css代码（引入一次就行）
<style type="text/css">
    .iconfont-svg {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
//调用函数获取用户会员等级图标，并显示
<em style='font-size: 22px;'>".tt_get_member_icon($this->_userId)."</em>
//函数部分 返回用户等级图标
function tt_get_member_icon($user_id)
{
    $member = new Member($user_id);
/*
通过symbol引用IconFont图标
class属性对应上方定义的通用css中的类名
xlink:href属性对应IconFont的图标类名
*/
    if ($member->is_vip_type_3()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-huangjinhuiyuan\"></use>
</svg>";
    }
    else if ($member->is_vip_type_2()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-baiyinhuiyuan\"></use>
</svg>";
    }
    else if ($member->is_vip_type_1()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-qingtonghuiyuan\"></use>
</svg>";
    }

    return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-putonghuiyuanicon\"></use>
</svg></i>";
}

效果图
IconFont **我的项目**

Staticfile CDN

由七牛云提供支持的静态资源库，收录的常用的js,css等静态资源库，在项目中使用可以简化开发(尤其是在库依赖较多时)，并有加快页面加载速度的作用。

/*
代码片段：  通过Staticfile CDN为项目引入vedio.js
若不使用静态资源库，则需要下载完整的js，css，兼容各浏览器内核的字体文件等
*/
<link  rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/video.js/6.0.1/video-js.min.css">
<script src="https://cdn.staticfile.org/video.js/6.0.1/video.min.js"></script>

Restlet Client -DHC

Chrome浏览器插件，可以方便的对http接口进行测试，在进行Ajax，Restful开发时非常有帮助。
//若无法翻墙，请自行搜索下载。

项目使用实图

Flat UI Colors

网站配色在很大程度上影响了网站的美观，Flat UI Colors列出了了扁平化设计中最受欢迎的色彩，可以吸取复制任何你看中的色彩。

网站截图

---

待续