后台管理系统的登录页面(layui表单模块)

原创 2018-12-21 13:16:48 549
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录界面</title> <!-- 引入layui样式文件 --> <link rel="stylesheet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<!-- 引入layui样式文件 -->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<!-- 引入layui基础核心库 -->
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body style="background:#1E9FFF;">
<div style="width: 500px;margin:270px auto;">
		<div style="background: #fff;border-radius:4px;box-shadow: 5px 5px 20px #444;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="password" class="layui-input">
			      	</div>
			      	<img src="image/yz.png">
			    </div>

			</form>
		</div>
	</div>
</body>
</html>

使用layui的时候,需要导入layui样式文件和layui基础核心库

从layui上引用form表单的时候,class必须和官方文档一样。

批改老师:天蓬老师批改时间:2018-12-21 13:18:34
老师总结:layUI是一个外部的js库,使用的时候,当然要先引入, 但要注意导入的位置

发布手记

热门词条