<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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 style="background: #0491FF;"> <div style="width:500px;margin: 290px auto 0px;"> <div style="background: #fff;border-radius: 4px;box-shadow: 5px 5px 20px #3D5777;padding: 20px;"> <form class="layui-form"> <div class="layui-form-item" style="color:gray"> <h2>后台管理系统</h2> </div> <hr> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" placeholder="请输入用户名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="text" placeholder="请输入密码" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">验证码</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> <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button> </div> </div> </form> </div> </div> </body> </html>
总结:layui很方便,可以快速搭建起简单的前台页面,减少css样式的设计。比较简单,根据文档就可以学会并且使用。在小米商城的轮播图设计中,简单几行代码就可以实现,深深体会到了layui的强大和便捷。