CSS特效第十天
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Login Form4</title>
<link
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(bg.jpg) no-repeat;
background-size: cover;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.login-box h1 {
width: 50%;
font-size: 40px;
border-bottom: 6px solid #4caf50;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #4caf50;
}
.textbox i {
float: left;
text-align: center;
width: 26px;
}
.textbox input {
width: 80%;
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
margin: 0 10px;
}
.btn {
width: 100%;
background: none;
border: 2px solid #4caf50;
padding: 5px;
font-size: 18px;
cursor: pointer;
outline: none;
margin: 12px 0;
}
</style>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fa fa-user" aria-hidden="true"></i>
<input type="text" placeholder="Username" />
</div>
<div class="textbox">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" placeholder="Password" />
</div>
<input type="button" class="btn" value="Sign in" />
</div>
</body>
</html>
