效果图：
示意图：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="login-Box">
<img id="user-icon" src="./images/user.png" alt="">
<h3>登录</h4>
<form action="">
<p>姓名</p>
<input type="text" id="name" placeholder="请输入姓名">
<p>密码</p>
<input type="password" id="password" placeholder="请输入密码">
<input type="submit" value="提交">
<a href="#">忘记密码</a>
</form>
</div>
</body>
</html>
css:
body
{
margin: 0;
padding: 0;
background: url(./images/bg.jpg);
background-size: cover;
font-family: sans-serif;
}
.login-Box
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
#user-icon
{
width: 100px;
height: 100px;
border-radius: 50%;
/*overflow: hidden;*/
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
h3
{
margin: 0;
padding: 0 0 20px;
color: #efed40;
text-align: center;
}
.login-Box p
{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.login-Box input
{
width: 100%;
margin-bottom: 20px;
}
.login-Box input[type="text"],
.login-Box input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder
{
color: rgba(255,255,255,0.52);
}
.login-Box input[type="submit"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.login-Box input[type="submit"]:hover
{
background: #efed40;
color: #262626;
}
.login-Box a
{
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
