大气登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<style type="text/css">
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
font-family: "微软雅黑";
background: #092756;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1{
color: #fff;
text-shadow: 0 0 10px rgb(0,0,0,0.3);
letter-spacing: 1px;
text-align: center;
}
input {
width: 100%;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus{
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.3),0 1px 1px rgba(255,255,255,0.2);
}
.btn{
-webkit-appearance: none;
background: #009dff;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 320px;
}
</style>
</head>
<body>
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="text" class="user" placeholder="用户名" required="required"/>
<input type="password" class="passwd" placeholder="密码" required="required"/>
<button type="submit" class="btn">登录</button>
</form>
</div>
</body>
</html>
