IconFont 阿里圖標(biāo)庫
使用圖標(biāo)可以可以為頁面增色，用字體圖標(biāo)替代圖形圖標(biāo)可以簡化開發(fā)，避免圖片與文字的對齊問題，提高用戶體驗(yàn)。IconFont資源豐富，品質(zhì)較高，支持通過font-class，Systrm等方式使用圖標(biāo)，且提供了項(xiàng)目管理功能，創(chuàng)建項(xiàng)目后，挑選圖標(biāo)并加入項(xiàng)目，即可生成不同調(diào)用方式的CDN靜態(tài)資源。
/*
代碼片段：在項(xiàng)目中用使用Symbol引用IconFont圖標(biāo)表示會(huì)員等級(jí)(已簡化)
使用Symbol引用方式是因?yàn)槠涫褂梅奖闱抑С侄嗌珗D標(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ù)獲取用戶會(huì)員等級(jí)圖標(biāo)，并顯示
<em style='font-size: 22px;'>".tt_get_member_icon($this->_userId)."</em>
//函數(shù)部分 返回用戶等級(jí)圖標(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 **我的項(xiàng)目**
Staticfile CDN
由七牛云提供支持的靜態(tài)資源庫，收錄的常用的js,css等靜態(tài)資源庫，在項(xiàng)目中使用可以簡化開發(fā)(尤其是在庫依賴較多時(shí))，并有加快頁面加載速度的作用。
/*
代碼片段： 通過Staticfile CDN為項(xiàng)目引入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接口進(jìn)行測試，在進(jìn)行Ajax，Restful開發(fā)時(shí)非常有幫助。
//若無法翻墻，請自行搜索下載。
項(xiàng)目使用實(shí)圖
Flat UI Colors
網(wǎng)站配色在很大程度上影響了網(wǎng)站的美觀，F(xiàn)lat UI Colors列出了了扁平化設(shè)計(jì)中最受歡迎的色彩，可以吸取復(fù)制任何你看中的色彩。
網(wǎng)站截圖
