前言
登录页面几乎是所有网页都需要完成的一个模块，一个好看的登录页面能够给人眼前一亮的感觉，今天带大家如何简单实现微博同款登录页面。（资源请下载附件）
效果展示：
html代码：
<div class="login">
<div class="loginway">
<a id="accountlogin" onclick="loginway(1)">账号登陆</a>
<a id="securelogin" onclick="loginway(2)">安全登陆</a>
</div>
<div id="iconway">
</div>
<div class="linechoose">
<div id="udline"></div>
</div>
<div class="content">
<div class="usermessage">
<input type="text" id="username" placeholder="邮箱/会员账号/手机号" class="messageinput">
<input type="text" id="password" placeholder="请输入密码" class="messageinput">
</div>
<div class="get-forget">
<label><input type="checkbox">记住我
<a style="float: right; cursor: pointer;">忘记密码</a></label>
</div>
<div style="text-align: center;margin-top: 15px;">
<button>登录</button>
</div>
</div>
</div>css代码
<style>
body{
height: 100vh;
margin: 0;
background-color: #f2f2f5;
display: flex;
justify-content: center;
align-items: center;
}
.login{
background-color: #ffffff;
width: 330px;
height: 300px;
box-shadow: 0px 0px 6px rgb(0,0,0,0.3);
}
.loginway{
width:290px;
height: 40px;
float: left;
margin-top: 20px;
}
#accountlogin{
margin-left: 55px;
color: #000;
font-weight: bold;
cursor: pointer;
}
#securelogin{
margin-left: 80px;
color: #808080;
cursor: pointer;
font-weight: 500;
}
#iconway{
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
background-image: url(QRcode.png);
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: -59px 0px;
cursor: pointer;
}
#iconway::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#ffffff;
transform-origin: top left;
transform: skewY(45deg);
}
.linechoose{
width: 280px;
height: 12px;
border-bottom: 1px solid #e5e5e5;
margin-left: 25px;
margin-right: 25px;
}
#udline{
width: 140px;
height: 10px;
border-bottom: 3px solid #fa7d3c;
transition:transform 0.3s ease-in-out;
}
.content{
width: 280px;
height: 230px;
margin-left: 25px;
margin-right: 25px;
margin-top: 10px;
}
.usermessage input[type="text"]{
margin-top: 12px;
width: 235px;
height: 32px;
}
#username{
background-image: url(username.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: 5px 5px;
padding-left: 40px;
}
#password{
background-image: url(password.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: 5px 5px;
padding-left: 40px;
}
input:focus {
outline: none;
border: 2px solid #fa7d3c;
}
.get-forget{
width: 280px;
height: 25px;
margin-top: 15px;
}
label{
color: #808080;
font-size: 16px;
}
button{
width: 275px;
height: 40px;
background-color: #fa7d3c;
border: none;
border-radius: 2px;
color: #ffffff;
font-size: 20px;
}
</style>js代码：
<script>
var inputs = document.getElementsByClassName("messageinput");
//为每个输出框设置监听事件
Array.from(inputs).forEach(function(input){
//获得焦点时
input.addEventListener("focus",function(){
input.placeholder="";
});
//失去焦点时
input.addEventListener("blur",function(){
input.placeholder="邮箱/会员账号/手机号";
});
});
function loginway(num){
var udline = document.getElementById("udline");
var accountlogin = document.getElementById("accountlogin");
var securelogin = document.getElementById("securelogin");
if(num==2){
udline.style.transform="translateX(100%)";
accountlogin.style.fontWeight="500";
accountlogin.style.color="#808080";
securelogin.style.fontWeight="bold";
securelogin.style.color="#000";
}else{
udline.style.transform="translateX(0)";
accountlogin.style.fontWeight="bold";
accountlogin.style.color="#000";
securelogin.style.fontWeight="500";
securelogin.style.color="#808080";
}
}
</script>
到此，登录页面编写完成，后续将带大家如何添加后台！
