本篇文章主要是記錄一些換EasyUI皮膚的過程,備忘.也歡迎美工大神各路UI給點好意見,EasyUI我就不介紹了,自行百度吧..(So..所以別問我是不是響應式..本身EasyUI就不是響應式..我換個皮膚..就更不談..)
其實重點看需求,我們主要做的后台項目對手機Web幾乎沒要求,所以,暫不考慮
上幾張效果圖先:
整體布局
樹形菜單:
菜單列表:
改了之后還是可以的(畢竟我也不是專業的美工,我就是個.NET的開發..沒辦法..被逼的..
)..
其實我們引用EasyUI的時候就可以發現,除了要引用easyui.css還要加一個icon.css,這里面就是EasyUI的圖標了,我們看看里面如圖:
里面都是一些.icon開頭的樣式,對應的都是一些background地址,這里我們就有兩種換的方案
第一種簡單無腦版:重做這些圖片大小一致 圖片換掉..
第二種高端大氣無后患版:找到新的圖標替代
我反正..選擇了第二種..,我們選擇Font-awesome3.2,這個圖標集來替換,
為什么選擇這個呢
1.他的3.2版本CSS開頭也是.icon(4.0+版本換成了fa)方便我們替換
2.圖標夠多..完全夠用
我們直接打開Font-awesome提供的CSS樣式.
將EasyUI的樣式復制到Font-awesome的最下面.
然后把其中的背景圖樣式全部刪除.
這里替換一個作為范例:
EasyUI中有一個叫.icon-add,我們發現圖標是一個加號
我們在Font-awesome官網找到這個加號對應的樣式名稱: icon-plus
然后在Font-awesome的CSS中搜索到他對應的context是:\f055
我們就在改.icon-add為如下代碼:
.icon-add:before{
content: "\f055";
}
這樣我們就完成了一個圖標的替換
后面的只要一一按照這個方法,就替換完成了~