一、前言
從今天開始，我們來學(xué)習(xí)一個前端的UI框架。為什么要學(xué)UI框架，隨著時代的進(jìn)步，網(wǎng)站開發(fā)技術(shù)越發(fā)成熟，因而各大網(wǎng)站便開始著重于用戶的視覺效果開發(fā)，因此一個個界面精美的網(wǎng)站猶如雨后春筍般的冒了出來，從這種現(xiàn)象可以看出，一個精美的界面對于一個網(wǎng)站的重要性可想而知了。那么下面小編將帶大家一起進(jìn)入layui的世界。
二、下載并導(dǎo)入框架
要想使用這個UI框架，首先我們將它下載下來，地址：https://u062.com/f/7715018-497165994-a6b382
(訪問密碼：6511)，下載好后解壓，結(jié)構(gòu)如下：
然后我們新建一個HTML文件，隨便編寫一些內(nèi)容并導(dǎo)入我們的layui文件。如下：
三、網(wǎng)頁樣式方案
layui集成各類的css樣式，這使得我們只需導(dǎo)入一些類名即可輕松擁有一些精美的元素，當(dāng)然還可以設(shè)置一些布局，一般用來開發(fā)精美的后臺管理系統(tǒng)，這里我們先從元素樣式開始講起，下面我們一一來講解下。
1.設(shè)置字體背景和元素背景顏色
我們可以通過layui提供的類名來輕松設(shè)置字體大小背景以及元素背景，如下圖：
我們可以看到，網(wǎng)頁中的文字和元素的背景和大小就有了些許變化，不過這些還不足以體現(xiàn)出layui的強(qiáng)大之處，下面讓我們來繼續(xù)學(xué)習(xí)layui中的圖標(biāo)。
2.圖標(biāo)
當(dāng)我們在編寫前端界面時，會將一些功能用在一張圖片上，比如刪除左右上下點(diǎn)擊的箭頭，這些圖片要么得我們找，或者自己使用svg畫出來，但是太費(fèi)功夫，layui提供了一系列精美的圖標(biāo)供我們使用，如圖：
這里我們寫出了幾個常用的圖標(biāo)，比如輪播圖常用的左右箭頭，后臺管理系統(tǒng)常用的上下箭頭，以及刪除和分享圖標(biāo)，是不是相當(dāng)方便了。
3.動畫
layui同時也提供了一系列的動畫效果，如下：
動畫效果在菜單中應(yīng)用的比較廣泛，不過如果你想提高整體網(wǎng)站的運(yùn)行效率的話，不建議使用過多的動畫效果。
4.按鈕
layui中內(nèi)置了很多不同樣式的按鈕，我們可以輕松實(shí)現(xiàn)各種各樣的按鈕，如圖：
當(dāng)然了，我們還可以將幾個按鈕拼接在一起，形成一個按鈕組，然后可以進(jìn)行多元化的操作。
5.表單
雖然HTML已經(jīng)到了第五個版本，但是默認(rèn)的表單的元素的樣式還是有點(diǎn)一言難盡啊，因此layui給我們也提供了很多方案，如下：
這個時候咱們的表單元素看起來就比較精美了。
6.導(dǎo)航菜單
利用layui可以輕松實(shí)現(xiàn)一些個性化的導(dǎo)航菜單，首先來看下水平導(dǎo)航欄，如下：
通過幾行代碼即可輕松實(shí)現(xiàn)水平導(dǎo)航欄;然后我們來看看垂直導(dǎo)航欄，如下：
一般的話，我們使用的后臺管理系統(tǒng)會用到側(cè)邊欄，如圖：
此時左邊的導(dǎo)航欄全部被填充，是不是很有感覺了?其實(shí)實(shí)現(xiàn)他不過是多了一個類名而已。
7.面包屑菜單
為了輕松展示網(wǎng)站路徑和一些輔助菜單內(nèi)容，面包屑被廣泛使用，下面我們來創(chuàng)建一個屬于自己的面包屑菜單，如下：
8.tab選項(xiàng)卡菜單
用于簡便的菜單制作，如下：
還有一種很簡潔的顯示方式，如圖：
當(dāng)然還有卡片式的tab選項(xiàng)卡菜單，如圖：
如果你想要給這些菜單添加一些刪除功能的話了，也是非常簡單的，如下：
9.進(jìn)度條
layui也可以制作很多精美的進(jìn)度條，如圖：
10.分割線
11.面板
一般主要用于幫助文檔，如圖：
12.表格
四.總結(jié)
layui可以輕松實(shí)現(xiàn)這些網(wǎng)頁中的效果，比起傳統(tǒng)的css需要創(chuàng)建大量代碼來看，可以說是相當(dāng)方便。
本文由網(wǎng)上采集發(fā)布，不代表我們立場，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.zltfw.cn/shbk/39416.html
相關(guān)推薦
-
小米主題美化（小米miui主題破解破解入門技能）
自MIUI9后，小米便加強(qiáng)了MIUI主題的保護(hù)策略，無論是收費(fèi)或免費(fèi)的主題，都禁止從瀏覽器下載主題包，主題下載途徑僅僅只有主題商店可選。但是主題商店...
-
稱為兩榜出身的是（兩榜出身是什么意思）
在科舉考試盛行的唐朝時期，進(jìn)士會試分甲、乙兩科，即稱所謂的兩榜而到了清朝，會試即進(jìn)士會試，鄉(xiāng)試即舉人試，分別為甲榜、乙榜，合稱兩榜 ，下面...
-
牂牁江怎么讀（牂牁江的拼音）
牂牁江讀作zāng kē jiāng牂牁江風(fēng)景區(qū)牂牁江景區(qū)位于貴州省六盤水市六枝特區(qū)西部，距離六枝特區(qū)中心區(qū)62公里，距六盤水市中心75公里沿水黃(水城到黃果...
-
史上最全五禽戲教學(xué)（最全專業(yè)五禽戲）
五禽戲 五禽戲是以肢體運(yùn)動為主，輔以呼吸吐納與意念配合的導(dǎo)引類功法。它是模仿五種禽獸虎、鹿、熊、猿、鳥的動作而編創(chuàng)成的氣功功法。五禽戲歷史...
-
漢樂府民歌有哪些（漢代樂府民歌）
樂府是自秦代以來設(shè)立的配置樂曲、訓(xùn)練樂工和采集民歌的專門官署，漢樂府指由漢時樂府機(jī)關(guān)所采制的詩歌。這些詩，原本在民間流傳，經(jīng)由樂府保存下...
-
書寫高原戍邊的忠誠答卷（致敬戍邊英雄勇立時代新功）
你們牢記黨和人民賦予的使命，堅守在生命禁區(qū)，用青春和熱血守衛(wèi)著祖國的神圣領(lǐng)土，出色完成了擔(dān)負(fù)的任務(wù)大家都是好樣的在中秋佳節(jié)即將來臨之際，...
-
浙江李蘭娟院士最新研究成果（李蘭娟院士夫婦相愛45年
文|筆下有情 有人說：婚姻不是天堂，就是地獄。 婚姻的上半場，是紅花過殿堂;婚姻的下半場，是考驗(yàn)赤子心。 在這場疫情中，婚姻幸福與否也成為了一...
-
兄弟四色激光打印機(jī)（功能全面還支持WiFi）
前言： 說起打印機(jī)，相信是很多單位、企業(yè)、甚至不少小伙伴家中必備產(chǎn)品。而打印機(jī)共享使用也越來越流行。簡單來說就是一個辦公室或者一個區(qū)域內(nèi)通...
-
不能忘卻的紀(jì)念原文魯迅（不能忘卻的紀(jì)念）
1937年12月12日下午伊始，已經(jīng)徹底喪失戰(zhàn)斗力的南京守軍接到上級命令開始全面撤退。緊接著在12月13日，盛極一時的南京城開始淪陷。由于提前沒有做好撤...
-
山西省合并了多少個縣（山西合并縣一覽表）
在山西省的東南部，有一個地方叫做長治縣，也就是現(xiàn)在的上黨區(qū)，它隸屬于長治市。長治縣地處于上黨盆地的南邊，西面和長子縣相連，東面和壺關(guān)縣相...
