<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> <script type="text/javascript" src ="static/layui/layui.js" ></script> <style> *{margin:0px;padding: 0px} .login{width: 500px;margin: 100px auto;} .logininfo{background:#fff;padding: 20px;border-radius: 5px;box-shadow: 5px 5px 20px #757575;} </style> </head> <body style="background:#1E9FFF"> <div> <div> <form> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 --> <div style="color: gray"> <h2>后台管理系统</h2> </div> <hr> <div> <label>用户名</label> <div> <input type="text" placeholder="请输入用户名"> </div> </div> <div> <label>密码</label> <div> <input type="text" placeholder="请输入密码"> </div> </div> <div> <div> <label>验证码</label> <div> <input > </div> <img src="static/layui/yz.png" alt=""> </div> </div> <div> <div> <button>立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </form> </div> </div> <script src="layui.js"></script> <script> layui.use('form', function(){ var form = layui.form; //各种基于事件的操作,下面会有进一步介绍 }); </script> </body> </html>
layui提供的风格使前端工作更多元化,也会自带些多余的属性。得经过风格需求对自带属性适当调整才能使页面装饰得更加精美。