用layui完成登录页面

原创 2019-06-02 17:48:24 415
摘要:<!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>


批改老师:天蓬老师批改时间:2019-06-03 10:53:18
老师总结:使用layUI内置的表单样式, 可以快速实现非常专业的效果, 极大的简化了前端页面的编写工作量

发布手记

热门词条

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号