摘要：基本思路： 首先要引入layui的核心樣式文件和基礎(chǔ)核心庫(kù)兩個(gè)部分。之后借助layui工具在設(shè)計(jì)的網(wǎng)頁(yè)中依次加入后臺(tái)管理系統(tǒng)以及通過(guò)表單欄添加的用戶(hù)名、密碼、以及登錄和驗(yàn)證碼部分，最后完成相關(guān)布局。全部代碼：<!DOCTYPE html> <html> <head> <title>登錄<
基本思路：
首先要引入layui的核心樣式文件和基礎(chǔ)核心庫(kù)兩個(gè)部分。之后借助layui工具在設(shè)計(jì)的網(wǎng)頁(yè)中依次加入后臺(tái)管理系統(tǒng)以及通過(guò)表單欄添加的用戶(hù)名、密碼、以及登錄和驗(yàn)證碼部分，最后完成相關(guān)布局。
全部代碼：
<!DOCTYPE html> <html> <head> <title>登錄</title> <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css"> <script type="text/javascript" src="../static/plugins/layui/layui.js"></script> </head> <body style="background:#1E9FFF"> <div style="width: 500px;margin:270px auto 0px; "> <div style="background: #fff; border-radius: 4px;box-shadow: 5px 5px 20px #4444;padding: 20px;"> <form class="layui-form"> <div class="layui-form-item" style="color: gray" > <h2>后臺(tái)管理系統(tǒng)</h2> </div> <hr> <div class="layui-form-item"> <label class="layui-form-label">用戶(hù)名</label> <div class="layui-input-block"> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密碼</label> <div class="layui-input-block"> <input type="password" placeholder="請(qǐng)輸入密碼" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">驗(yàn)證碼</label> <div class="layui-input-inline"> <input type="text" class="layui-input"> </div> <img src="../yz.png"> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">登錄</button> </div> </div> </form> </div> </div> </body> </html>
小結(jié):
layui，是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式。外在很簡(jiǎn)單但是其中設(shè)計(jì)的部分樣式很精美，體積輕盈，組件也十分豐富，非常適合界面的快速開(kāi)發(fā)。在編寫(xiě)前端程序的時(shí)候可能會(huì)在一些地方需要樣式精美的設(shè)計(jì)，而layui所提供的部分可以有效解決，可以在自身編寫(xiě)的同時(shí)借鑒layui進(jìn)行編寫(xiě)，從而使網(wǎng)頁(yè)觀(guān)看和使用起來(lái)更為方便且美觀(guān)。
批改老師：天蓬老師批改時(shí)間：2019-03-22 09:02:13
老師總結(jié)：layUI是近年來(lái)在國(guó)內(nèi)比較流行的前端框架, 但是有越來(lái)越商業(yè)化的趨勢(shì), 建議多了解幾個(gè), 以備用