一、实现过程
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="#" id="form">
<h1 style="text-align: center; color: aliceblue; font-weight: bold;">LOGIN IN</h1>
<p>用户名:<input id="userNname" type="text"/><label id="name_trip"></label></p>
<p>密 码:<input id="password" type="password"/><label id="password_trip"></label></p>
<div style="text-align: center;margin-top: 30px;"></div>
<input type="submit" class="button" value="登录"/>
<input type="reset" class="button" value="重置"/>
</form>
</body>
</html>
.css
html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: url(../img/bg.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
#login Div{
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip{
margin-left: 50px;
color: red;
}
p{
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input{
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
二、实现效果