HTML+CSS前端简易用户登录界面

Day1 刚学了一些html和css的简单语法，尝试写一个非常简易的静态用户登录界面。

login_simple.html

<!DOCTYPE html>
<html lang="en"><head><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="login_simple.css"><title>Document</title>
</head><body><form action="" class="login"><p>Login</p><input type="text" placeholder="Username"><input type="password" placeholder="Password"><input type="submit" class="btn" value="login"></form>   
</body></html>

login_simple.css

这里需要把 background.jpg 替换成自己的背景图。

*{user-select: none;
}body{background: url(./background.jpg) no-repeat;background-size: cover;background-attachment: fixed;
}.login{position: fixed;top: 50%;margin-top: -200px;left: 40%;margin-bottom: -200px;background-color: aliceblue;width: 400px;height: 400px;border-radius: 25px;text-align: center;padding: 5px 40px;box-sizing: border-box;
}p{font-size: 42px;font-weight: 600;
}input{background-color: aliceblue;width: 100%;height: 48px;margin-bottom: 10px;border: none;border-bottom: 2px solid silver; /*cover the previous*/outline: none;font-size: small;
}.btn{background-color: black;width: 38%;height: 48px;border-radius: 8px;margin-top: 40px;font-size: small;font-weight: 600;color: aliceblue;
}
.btn:hover{background-color: rgb(243, 243, 186);
}