JAVA日报
好看的登录界面
@charset "UTF-8";
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 24px;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight:500;
}
.box input[type = "text"],.box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline :none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline :none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
.box a{
font-size: 5px;
color: #3498db;
float: right;
}
.box a:hover{
color: #2ecc71;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<link rel="stylesheet" href="css/login.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<body>
<form class="box" action="" method="post" id="data">
<h1>Login</h1>
<input type="text" name="id" id="ID" placeholder="Username">
<input type="password" name="pwd" id="PWD" placeholder="Password">
<input type="submit" id="sub" value="Login">
<p ><a href="register.html">注册</a></p>
</form>
<script>
$(document).ready(function(){
$('#sub').click(function (e) {
$.ajax({
type : "POST",
url : "http://localhost/Login?action=login",
async: false,
data : $('#data').serializeArray(),
dataType : 'json',
success: function(result){
alert(result["message"]);
alert(JSON.stringify(result));
},
error: function(result){
alert(result["message"]);
alert(JSON.stringify(result));
}
});
});
})
</script>
</body>
</html>
