用layui完成登录页面

Original 2019-06-02 17:48:24 316
abstract:<!DOCTYPE html> <html> <head> <title>登录</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"
<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
	<script type="text/javascript" src="static/layui//layui.js"></script>
</head>
<body style="background:#1e9fff;">
<div style="width:500px;margin:300px auto 0px">
	<div style="background:#fff;border-radius:5px;box-shadow:5px 5px 20px #4444;padding:20px;">
		<form class="layui-form">
			<div class="layui-form-item" style="color:gray">
				<h2>后台管理系统</h2>
			</div>
			<hr>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
				    <input type="text" placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
				    <input type="text" placeholder="请输入密码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">验证码</label>
				<div class="layui-input-inline">
				    <input type="text" class="layui-input">
				</div>
				<img src="static/images/555.jpg" style="height:38px;">
			</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>
</body>
</html>


Correcting teacher:天蓬老师Correction time:2019-06-03 10:53:18
Teacher's summary:使用layUI内置的表单样式, 可以快速实现非常专业的效果, 极大的简化了前端页面的编写工作量

Release Notes

Popular Entries