diff --git a/app/templates/login.html b/app/templates/login.html
new file mode 100644
index 0000000..5d8fee8
--- /dev/null
+++ b/app/templates/login.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>登录</title>
+  <link href="static/css/layui.css" rel="stylesheet">
+</head>
+<body class="layui-padding-3">
+
+<style>
+.demo-login-container{width: 320px; margin: 21px auto 0;}
+.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
+</style>
+<form class="layui-form">
+    <h1 style="text-align:center; color: #16baaa;">网上上课点名系统</h1>
+  <div class="demo-login-container">
+    <div class="layui-form-item">
+      <div class="layui-input-wrap">
+        <div class="layui-input-prefix">
+          <i class="layui-icon layui-icon-username"></i>
+        </div>
+        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
+      </div>
+    </div>
+    <div class="layui-form-item">
+      <div class="layui-input-wrap">
+        <div class="layui-input-prefix">
+          <i class="layui-icon layui-icon-password"></i>
+        </div>
+        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
+      </div>
+    </div>
+    <div class="layui-form-item">
+      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
+      <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
+    </div>
+    <div class="layui-form-item">
+      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
+    </div>
+  </div>
+</form>
+
+<script src="static/layui.js"></script>
+<script>
+layui.use(function(){
+  var form = layui.form;
+  var layer = layui.layer;
+  // 提交事件
+  form.on('submit(demo-login)', function(data){
+    var field = data.field; // 获取表单字段值
+    // 显示填写结果，仅作演示用
+    layer.alert(JSON.stringify(field), {
+      title: '当前填写的字段值'
+    });
+    // 此处可执行 Ajax 等操作
+    // …
+    return false; // 阻止默认 form 跳转
+  });
+});
+</script>
+
+
+</body>
+</html>
\ No newline at end of file
