htmlcss制作的web前端登录界⾯web前端登录界⾯
让我们先看⼀下效果
下⾯是具体怎么实现的代码（代码分为HTML和CSS两个⽂档）
HTML⽂件代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="Login.css" >
</head>
<body>
<div id="main">
<div id="avatar">
</div>
<div id="account">
<div class="input-box"><input type="text" placeholder="Please input username"></div>
<div class="input-box"><input type="password" placeholder="Please input password"></div>        </div>
<button class="login-btn">Sign In</button>
<div id="footer">
<a href="#">Forget Password?</a>
</div>
</div>
</body>
下⾯是CSS代码实现
@charset "utf-8";
/*统⼀设置*/
*{
margin: 0;
padding: 0;
}
/*⽹页背景图⽚*/
body{
background: url("background.jpg") no-repeat ;
background-size: cover;
}
/*登陆区主体*/
#main{
width: 350px;
height: 600px;
background: rgba(0,0,0,0.5);
margin: 40px auto;
border-top: 8px solid #ffc5d1;
position: relative;
}
/*头像区*/
#avatar{
width: 184px;
height: 184px;
background: url("avatar.jpg") no-repeat;
background-size: cover;
margin: 50px auto;
border-radius: 50%;
}
/*账号密码区*/
#account{
width: 75%;
/*height: 200px;*/
/*background: #ffd1e4;*/
margin: 0 auto;
}
#account .input-box{
height: 50px;
/*background: #ffbcdd;*/
}
#account .input-box input{
height: 40px;
width: calc(100% - 10px);
border: none;
outline: none;
padding: 0 5px;
background: rgba(0,0,0,0.5);    color: #ffcae5;
font-size: 16px;
}
/*登录按钮*/
.login-btn{
width: 75%;
height: 40px;
display: block;
margin: 30px auto;
background:#ffc5d1 ;
border: none;
outline: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
/*按下按钮*/
.login-btn:active{
position: relative;
top:2px;
}
/*登陆区底部*/
#footer{
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #ccc; }
#footer a{
color: #ccc;
text-decoration: none;
}html网页设计css
#footer a:hover{
color: red;
}