另一个后台登录界面

最初发表于: 2020-04-25 13:41:39

长这样

代码如下

<!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: #2d3a4b;
	}

	.login{
		width:440px;
		height:375px;
    	margin: 150px auto 0;
	}

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

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

	.login-title{
		color:#eee;
		font-weight: 900;
		font-size:26px;
		text-align: center;
		margin:50px 0 40px;
	}

	.login-form input{
		border-radius: 5px;
		height:47px;
		background: #283443;
		color:#fff;
		border:1px solid #3e4957;
		font-size:16px;
	}

	.login-form input::placeholder{
		color:#eee;
	}
	</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-normal">登录</button>
			</div>
		</div>
	</div>
</body>
<script src="//static.class4ever.com/layui/v2.5.5/layui.all.js"></script>
</html>