摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css&q
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"> <script type="text/javascript" src='../layui/layui.js'></script> </head> <body style='background:#1E9FFF'> <div style='width:500px;height:300px;margin:250px auto;box-shadow:3px 5px 10px;background:#fff;padding:10px;box-sizing:border-box;position:relative;'> <div style='width:100%;height:50px;background:#fff'><h3 style='border-bottom:1px solid #eee;line-height:50px;font-size:20px;color:gray'>后台管理系统</h3></div> <form action=""> <div> <label>账号</label> <div> <input type="text" name="title" required lay-verify="required" placeholder="请输入账号" autocomplete="off" style='width:300px;margin-top:20px'> </div> </div> <div> <label>密码</label> <div> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" style='width:300px;'> </div> </div> <div> <label>验证码</label> <div> <input type="text" name="title" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" style='width:190px;'> </div> <img src="../images/yz.png" style='position:absolute;left:330px;bottom:75px'> <button class="layui-btn layui-btn-radius" style='width:200px;margin-left:100px;margin-top:20px'>登录</button> </div> </form> </div> </body> </html>
layui很简单,轻便。能很轻松的完成普通基础的需求。
批改老师:天蓬老师批改时间:2018-11-18 15:21:04
老师总结:效果出来了,注意处理一下form和登录按钮的问题,点击登录按钮的时候会直接提交整个form