<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿梨视频用户登录</title>
<link rel="stylesheet" href="css/login.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="cover">
<div class="login-box">
<div class="title">
<h1>手机快捷登陆</h1>
</div>
<div class="login-form">
<div class="input-group">
<i class="label-icon fa fa-mobile-phone fa-2x"></i>
<input type="text" class="input-box" placeholder="请输入手机号">
</div>
<div class="input-group seekbar">
<span>请按住滑块,拖动到右边</span>
<div class="thumb">>></div>
</div>
<div class="input-group" style="margin-bottom: 5px">
<i class="label-icon icon-vcode fa fa-id-card"></i>
<input type="number" class="input-box input-vcode" placeholder="请输入验证码">
<span class="split"></span>
<a href="">获取验证码</a>
</div>
<span class="tips">未注册手机验证后自动登陆</span>
<button class="btn-login">登陆</button>
</div>
<div class="footer">
<div class="reg">
<a href="">账号登陆</a>
</div>
<div class="lis">
<span>登陆或注册即同意梨视频
<a class="btn1" href="" >[用户协议]</a>
和
<a class="btn2" href="">[隐私政策]</a>
</span>
</div>
<div class="unin">
<ul>
<li><a href="" class="login-wechat"><i class="fa fa-wechat"></i> 微信登陆</a></li>
<li><a href="" class="login-qq"><i class="fa fa-qq"></i> QQ登陆</a></li>
<li><a href="" class="login-weibo"><i class="fa fa-weibo"></i> 微博登陆</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
ul,
ol,
li{
list-style: none;
}
.cover{
position: relative;
height: 942px;
background: rgba(0,0,0,0.9);
}
.login-box{
position: absolute;
top: 50%;
left: 50%;
margin: -270px 0 0 -210px;
width: 380px;
height: 500px;
}
h1{
height: 80px;
font-weight: 500;
font-size: 2.5em;
color: #eee;
}
.input-group{
position: relative;
margin:0 0 20px;
padding: 0 10px;
width: 380px;
height: 40px;
line-height: 40px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 2px;
}
.label-icon{
margin-top: 2px;
color: #eee;
}
.input-group>*{
float: left;
}
.input-box{
margin-left: 10px;
width: 330px;
height: 100%;
border: 0;
background: transparent;
color: #fff;
outline: none;
}
.seekbar{
position: relative;
height: 34px;
line-height: 34px;
background: #999;
border-color: #999;
text-align: center;
font-size: 0.8em;
color: #666666;
}
.thumb{
position: absolute;
left: -1px;
top: -1px;
width: 34px;
height: 34px;
text-align: center;
color: #999;
background: #fff;
}
.seekbar span{
display: block;
width: 100%;
line-height: 32px;
text-align: center;
}
.icon-vcode{
position: absolute;
top: 8px;
}
.input-vcode{
margin-left: 30px;
width: 200px;
}
.split{
margin: 10px 20px;
height: 20px;
width: 1px;
background: rgba(255,255,255,0.2);
}
a{
color: #ccc;
font-size: 0.8em;
text-decoration: none;
}
a:hover{
color: #FDDE01;
}
.tips{
margin-top: -10px;
font-size: 0.8em;
color: #999;
}
.btn-login{
display: block;
margin-top: 40px;
width: 380px;
height: 50px;
background: #FDDE01;
color: #222;
font-size: 1.2em;
letter-spacing: 5px;
border: 1px solid #FDDE01;
cursor: pointer;
}
.btn-login:hover{
opacity: 0.9;
}
.reg{
height: 100px;
line-height: 100px;
text-align: center;
}
.reg>a{
color: #FDDE01;
font-size: 16px;
border-bottom: 1px solid #FDDE01;
}
.reg>a:hover{
color: #ff6700;
border-color: #ff6700;
}
.lis{
text-align: center;
font-size: 0.8em;
color: #999;
}
.lis a{
color: #FDDE01;
}
.lis a:hover{
color: #ff6700;
}
.unin{
margin-top: 20px;
height: 44px;
}
.unin>ul{
display: flex;
}
.unin>ul li{
flex: 1;
width: 120px;
height: 44px;
line-height: 44px;
text-align: center;
background: #FDDE01;
}
.unin>ul>li:not(:last-child){
margin-right: 10px;
}
.unin a{
display: block;
height: 100%;
color: #fff;
}
.login-wechat{
background: #31b658;
}
.login-qq{
background: #5892d9;
}
.login-weibo{
background: #dd3f3f;
}
.unin i{
font-size: 1.2em !important;
}