HTML簡單的登錄頁面。幫你快速完成畢業(yè)設(shè)計(jì)（學(xué)習(xí)筆記）
我的學(xué)習(xí)筆記：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>log in(可自行更改)</title>
<style type="text/css">
body{
background-image:url(img/background.jpg) ;/*設(shè)置自己的圖片*/
background-attachment: fixed;
background-size: 100%;
}
#login-box{
background-color: #00000068;/*可以設(shè)計(jì)自己喜歡的顏色*/
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>
