サマリー：<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>
</head>
<style>
body {
font-family: "微軟雅黑";
background: #1e9fff;
}
.wrap {
width: 500px;
margin: 270px auto 0px;
}
.wrap-bg {
background: #fff;
border-radius: 4px;
box-shadow: 5px 5px 20px #4444;
padding: 20px;
}
.yzm{
width: 130px;
height: 37px;
background: #ccc;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="wrap-bg">
<form action="" class="layui-form">
<div class="layui-form-item" style="color: gray">
<h2>后臺管理系統(tǒng)</h2>
</div>
<hr />
<div class="layui-form-item">
<label class="layui-form-label">用戶名</label>
<div class="layui-input-block">
<input
type="text"
name="title"
required
lay-verify="required"
placeholder="請輸入賬號"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密碼</label>
<div class="layui-input-block">
<input
type="password"
name="password"
required
lay-verify="required"
placeholder="請輸入密碼"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">驗(yàn)證碼</label>
<div class="layui-input-inline">
<input
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="yzm"></div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">
登陸
</button>
</div>
</div>
</form>
</div>
</div>
<script>
layui.use("form", function() {
var form = layui.form;
//監(jiān)聽提交
form.on("submit(formDemo)", function(data) {
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
就是找框架套。再記住一些通用的class就行
添削の先生：查無此人添削時(shí)間：2019-03-26 09:47:58
先生のまとめ：完成的不錯。layui框架可以快速搭建頁面，剩下時(shí)間寫其他功能。