layui登录界面作业

原创 2018-11-18 15:05:00 353
摘要:<!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>

作业.pnglayui很简单,轻便。能很轻松的完成普通基础的需求。

批改老师:天蓬老师批改时间:2018-11-18 15:21:04
老师总结:效果出来了,注意处理一下form和登录按钮的问题,点击登录按钮的时候会直接提交整个form

发布手记

热门词条