网站后台登录页面

原创 2019-01-05 13:36:00 295
摘要:<!DOCTYPE html> <html> <head> <title>登录</title> <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"
<!DOCTYPE html>
<html>
<head>
	<title>登录</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;margin:270px auto 0px; ">
		<div style="background: #fff; border-radius: 4px;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" placeholder="按图片内容输入验证码" class="layui-input">
					  </div>
					  <img src="../yz.png">
				</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>

layui感觉是封装好可以直接使用的库,很多东西都不用自己在重新开发就可以使用,很方便,拿过来适当的改一改就可以直接使用,比如上面的用户名密码以及验证码框,不需要再单独写具体的宽高等等,只用layui-input-block或者inline就实现了。

批改老师:天蓬老师批改时间:2019-01-05 14:47:24
老师总结:html页面对css和js文件的引入,最好使用绝对路径。避免../这样相对路径跳来跳去,上线时极少会用相对路径

发布手记

热门词条