成人精品一区二区久久久,97人妻人人做人碰人人爽

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

給jui(dwz)的菜單樹換一套漂亮的圖標(biāo)

php中文網(wǎng)

發(fā)布： 2016-09-07 12:58:09

原創(chuàng)

2324人瀏覽過

jui是一個免費(fèi)開源的框架，在使用初期，會遇到一些麻煩，因為文檔實在太少了，完全不知道從哪里入門，但是，一旦你深入學(xué)習(xí)后，你會發(fā)現(xiàn)，你的選擇是不錯的，它會提高你開發(fā)的效率，同時，你會深深愛上它。

目前公司有幾個小項目在做，本著少花錢的原則（其實是自己前端水平有限），選擇了此框架，在學(xué)習(xí)開發(fā)過程中，遇到了一些問題，但都圓滿解決，所以很希望分享出來，共同學(xué)習(xí)進(jìn)步。

我水平有限，有寫得不好的地方請多多包含。

今天或接下來幾天，我都會先圍繞界面的美化進(jìn)行展開。今天先講圖標(biāo)的美化。

先來看看官方原來的菜單圖標(biāo)。它是統(tǒng)一的，簡單的。

再來看看修改后的圖標(biāo)，這是多彩的，個性的，張揚(yáng)的。是不是覺得漂亮多了？是不是有眼前一亮的感覺？

接下來，我們就開始細(xì)說：

剛開始以為，既然系統(tǒng)提供了默認(rèn)的圖標(biāo)，我們就不能再添加或修改，這完全不符合個性的需求，相信作者也不希望看到缺少創(chuàng)新的界面。因此抱著試試看的態(tài)度，進(jìn)行了開動。

用過bootstrap，對于字體圖標(biāo)很感興趣，因此下載了fontawesome字體文件，將框架左側(cè)菜單列表改為：

<li><a href="@Url.Content("~/CarManage/Index")" target="navTab" rel="carindex"><i class="fa fa-bus fa-lg fa-fw"></i>  車輛管理</a></li>

登錄后復(fù)制

對，關(guān)鍵代碼就是這個 ? ,使用fontawesome的好處就是，不有去處理圖片，它是以字體的形式進(jìn)行展示，同時調(diào)用方便，在文字前加入一個

就行，記得加一個空格。

附上fontawesome的地址，可以到上面找到你想要的圖標(biāo)：http://fontawesome.dashgame.com/

這樣一來，菜單的前面就加了一個圖標(biāo)了。是不是比以前漂亮多了？但是不是還是有點(diǎn)看不上眼？確實，因為為什么都是黑的？

好吧，再繼續(xù)怎么變顏色。其實聰明的你應(yīng)該已經(jīng)知道了。JUI自帶有幾套模板，每套模板對應(yīng)一個CSS文件，只要我們添加一個樣式就可以了。

打開JUI的主題目錄

每個目錄下面有一個style.css文件，打開它，在最下面添加自定義的圖標(biāo)顏色

<span style="color: #008000;">/*</span><span style="color: #008000;">自定義</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">菜單圖標(biāo)的顏色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.tree i</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#88c7cb</span>;}

登錄后復(fù)制

每個主題添加相應(yīng)的顏色，顏色的話，根據(jù)主題的顏色自行設(shè)定。

至此，漂亮的樹菜單圖標(biāo)就添加好了，同時也美化好了。