layui不同頁面使用同一模板「layui模板怎麼用」

一、前言

從今天開始，我們來學習一個前端的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需要創建大量代碼來看，可以說是相當方便。