HTML简单的登录页面。帮你快速完成毕业设计（学习笔记）
我的学习笔记：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>log in(可自行更改)</title>
<style type="text/css">
body{
background-image:url(img/background.jpg) ;/*设置自己的图片*/
background-attachment: fixed;
background-size: 100%;
}
#login-box{
background-color: #00000068;/*可以设计自己喜欢的颜色*/
border-radius:14px ;
text-align: center;
margin: 0px auto;
margin-top: 200px;
width: 360px;
height:400px ;
}
#login-box h1{
padding-top: 60px;
color:#ffffff;
}
#login-box .input-box{
margin-top: 15px;
}
#login-box .input-box input{
border: none;
background: none;
border-bottom: #FFFFFF 2px solid;
padding: 5px 10px ;
outline:none ;
color: #FFFFFF;
}
#login-box button{
margin-top:30px ;
width: 100px;
border-radius:14px ;
outline: none;
border: none;
background-image: linear-gradient(120deg,#a6c0fe 0%,#f68084 100%);
}
</style>
</head>
<body>
<div id="login-box">
<h1>Login</h1>
<div class="input-box">
<input type="text" placeholder="Username">
</div>
<div class="input-box">
<input type="password" placeholder="password">
</div>
<button>Sign in</button>
</div>
</body>
</html>
