摘要：<!DOCTYPE html> <html> <head> <title>登陸</title> <!--引入核心樣式文件--> <link rel="stylesheet" type="text/css" href="stat
<!DOCTYPE html> <html> <head> <title>登陸</title> <!--引入核心樣式文件--> <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> <script type="text/javascript" src="static/layui/layui.js"></script> </head> <body> <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">用戶名</label> <div class="layui-input-block"> <input type="text" placeholder="請(qǐng)輸入用戶名" 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="static/images/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> </body> </html>
layui是引用外部的css和js，然后根據(jù)layui網(wǎng)站上的示例復(fù)制自己需要的樣式代碼，根據(jù)自己的需求修改一下就可以了，很簡單。減少了寫css和js的代碼工作量。
批改老師：天蓬老師批改時(shí)間：2018-11-23 09:00:47
老師總結(jié)：LayUI,最早被大家關(guān)注的,是他的彈層layer功能,非常強(qiáng)大,不過,現(xiàn)在已經(jīng)成了一個(gè)功能齊全的前端工具