一个后台登录界面

最初发表于: 2020-04-25 12:30:07

长这样

代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Login</title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="//static.class4ever.com/layui/v2.5.5/css/layui.css">
	<style type="text/css" media="screen">
	* {
		margin:0;
		padding:0;
	}	

	html{
		background: #444;
	}

	.login{
		width:440px;
		height:375px;
		background:#fff;
		position: fixed;
    		top: 0px;
    		left: 0px;
    		right: 0px;
    		bottom: 0px;
    		margin: auto;
    		border-radius: 5px;
	}

	.login-form{
		padding: 0 40px;
	}

	.login-form>div{
		margin-top:30px;
	}

	.login-title{
		font-size:26px;
		text-align: center;
		margin-top:50px;
	}
	</style>
</head>
<body>
	<div class="login">
		<div class="login-title">
			后台登录
		</div>
		<div class="login-form">
			<div>
				<input type="text" class="layui-input" placeholder="用户名">
			</div>
			<div>
				<input type="password" class="layui-input" placeholder="密码">
			</div>
			<div>
				<button type="button" class="layui-btn layui-btn-fluid layui-btn-lg">登录</button>
			</div>
		</div>
	</div>
</body>
<script src="//static.class4ever.com/layui/v2.5.5/layui.all.js"></script>
</html>