從今天起，我們一起來學習一個前面的UI架構。為什么要學習UI架構，伴隨著社會的進步，網站開發技術愈發完善，因此各大論壇就開始側重于客戶的視覺沖擊開發設計，因而一個個頁面精致的網址宛如如雨后春筍的冒了出來，從這種情況能夠得知，一個精致的頁面針對一個網站的必要性可想而知了。那樣接下來小編就將帶大家一起進入layui的全球。
若想使用這種UI架構，最先我們將要它下載下來，詳細地址：https://u062.com/f/7715018-497165994-a6b382
(瀏覽登陸密碼：6511)，免費下載之后緩解壓力，構造如下所示：
最后我們新創建一個HTML文件，隨意撰寫一些內容并導進大家的layui文件。如下所示：
layui集成化各種各樣的css樣式，這也使得我們只需要導進一些類名就可以輕輕松松有著一些精致的元素，自然還能設一些合理布局，一般用于開發設計精致的后臺管理界面，接下來我們從元素款式逐漸說起，下面我們就一一來講解下。
1.設定字體背景和元素背景色
我們可以根據layui所提供的類名來輕輕松松設置字體大小環境及其元素環境，如下圖所示：
我們可以見到，網頁頁面里的文字元素的背景和尺寸也就有了一絲轉變，但是這些不足以反映出layui的強勁的地方，下面讓我們來繼續深造layui中的標志。
2.標志
我們在撰寫前端界面時，會將一些作用用于一張圖片上，例如刪掉左右上下點一下的箭頭符號，這種照片要不得人們找，或自己使用svg畫出來的，但是太費功夫，layui帶來了一系列精致的標志供大家應用，如圖：
接下來我們描寫了好多個常見的標志，例如滾動圖片常見的左右箭頭，后臺管理界面常見的上下箭頭，及其刪掉和分享圖標，是否非常便捷。
3.動漫
layui并且也給予了一系列的動態效果，如下所示：
動態效果在菜單中運用的非常廣泛，但是如果你想要提升總體頁面的使用效率得話，不建議用過多動態效果。
4.按鍵
layui中內嵌了許多不一樣款式的按鍵，我們可以真正實現各種各樣按鍵，如圖：
當然，我們也可以將好多個按鍵拼湊在一起，形成一個按鍵組，隨后能夠進行多樣化的實際操作。
5.表格
盡管HTML已經是第五個版本號，可是默認表格的元素的款式還是有一些一言難盡啊，因而layui給大家也帶來了許多計劃方案，如下所示：
這時候我們的表格元素看上去就較為精致了。
6.導航欄菜單
運用layui能夠真正實現一些個性化導航欄菜單，最先來看一下水準導航欄，如下所示：
根據兩行編碼就可以真正實現水準導航欄;隨后我們來看一下豎直導航欄，如下所示：
一般得話，大家所使用的后臺管理界面要用到側欄，如圖：
這時左邊導航欄全被添充，是否很有感覺了?實際上完成他只不過是多了一個類名罷了。
7.面包糠菜單
為了能輕輕松松展示網站途徑和一些協助菜單具體內容，面包糠普遍使用，下面來創建一個屬于自己面包糠菜單，如下所示：
8.tab菜單欄菜單
用以簡單的菜單制做，如下所示：
還有一種很簡約的動態顯示，如圖：
除此之外還有卡片設計的tab菜單欄菜單，如圖：
如果你想給那些菜單添加一些刪掉作用的話了，也是很簡單的，如下所示：
9.時間軸
layui也可以做許多精致的時間軸，如圖：
10.分隔線
11.控制面板
一般主要運用于幫助文件，如圖：
12.報表
layui能夠真正實現這種網頁頁面中效果，相比傳統式的css必須建立很多編碼來說，算得上是非常便捷。
原創文章，作者：leping，如若轉載，請注明出處：http://www.qdgszy.com/hq-4220.html