IconFont 阿里圖標(biāo)庫
使用圖標(biāo)可以可以為頁面增色决摧，用字體圖標(biāo)替代圖形圖標(biāo)可以簡化開發(fā)，避免圖片與文字的對齊問題炒考，提高用戶體驗噩死。IconFont資源豐富，品質(zhì)較高爽室，支持通過font-class汁讼，Systrm等方式使用圖標(biāo)，且提供了項目管理功能阔墩，創(chuàng)建項目后嘿架，挑選圖標(biāo)并加入項目，即可生成不同調(diào)用方式的CDN靜態(tài)資源戈擒。
/*
代碼片段：在項目中用使用Symbol引用IconFont圖標(biāo)表示會員等級(已簡化)
使用Symbol引用方式是因為其使用方便且支持多色圖標(biāo)
詳見http://www.iconfont.cn/plus/help/detail?helptype=code
*/
//引入由IconFont生成的通過Symbol引用使用圖標(biāo)所需的的js(CDN地址)
<script src="http://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>
//調(diào)用函數(shù)獲取用戶會員等級圖標(biāo)眶明，并顯示
<em style='font-size: 22px;'>".tt_get_member_icon($this->_userId)."</em>
//函數(shù)部分 返回用戶等級圖標(biāo)
function tt_get_member_icon($user_id)
{
$member = new Member($user_id);
/*
通過symbol引用IconFont圖標(biāo)
class屬性對應(yīng)上方定義的通用css中的類名
xlink:href屬性對應(yīng)IconFont的圖標(biāo)類名
*/
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
由七牛云提供支持的靜態(tài)資源庫，收錄的常用的js,css等靜態(tài)資源庫筐高，在項目中使用可以簡化開發(fā)(尤其是在庫依賴較多時)搜囱，并有加快頁面加載速度的作用。
/*
代碼片段： 通過Staticfile CDN為項目引入vedio.js
若不使用靜態(tài)資源庫柑土，則需要下載完整的js蜀肘，css，兼容各瀏覽器內(nèi)核的字體文件等
*/
<link rel="stylesheet" type="text/css" >
<script src="https://cdn.staticfile.org/video.js/6.0.1/video.min.js"></script>
Restlet Client -DHC
Chrome瀏覽器插件稽屏，可以方便的對http接口進行測試扮宠，在進行Ajax，Restful開發(fā)時非常有幫助狐榔。
//若無法翻墻坛增，請自行搜索下載。
項目使用實圖
Flat UI Colors
網(wǎng)站配色在很大程度上影響了網(wǎng)站的美觀薄腻，F(xiàn)lat UI Colors列出了了扁平化設(shè)計中最受歡迎的色彩收捣，可以吸取復(fù)制任何你看中的色彩。
網(wǎng)站截圖
