html 前端根据vivo界面自写代码
html代码：
<!DOCTYPE html>
<html>
<head>
<link href="css/2.css" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="allbg">
<div class="backwhite"></div>
<div class="backimg">
<div class="img_blank"></div>
<div class="img_blank"></div>
<div class="img_blank"></div>
<div class="img_blank"></div>
<div class="img_blank"></div>
<div class="login">
<div class="menu-head1"></div>
<div class="menu-head1"></div>
<div class="menu">
<div class="menu-head1" style="text-align: center;"><font size="6">账号登录</font></div>
<div class="menu-head2"> <input type="text" placeholder="手机号/邮箱" lay-verify="email" class="text"></div>
<div class="menu-blank"></div>
<div class="menu-head2"> <input type="password" placeholder="请输入密码" lay-verify="password1" class="password"></div>
<div class="menu-blank"></div>
<div class="menu-head2"> <input type="submit" name="login" value="登录" class="loganin"></div>
<div class="menu-blank"></div>
<div class="menu-head2"> <input type="button" name="new_login" value="注册vivo账号" class="new_loganin"></div>
<div class="menu-blank"></div>
<div class="menu-blank"></div>
<div class="other_logan">其他方式登录</div>
<div class="menu-blank"></div>
<div class="menu-blank_img"></div>
<div class="menu-blank_img"></div>
<div class="menu-blank_img"></div>
<div class="other_logan_img"><a href="https://im.qq.com/"><img src="img/qq.png" onload='if (this.width>20 || this.height>20) if (this.width/this.height>=20/20) this.width=30 ; else this.width=30;'></a> </div>
<div class="menu-blank_img2"></div>
<div class="other_logan_img"><a href="https://weixin.qq.com/"><img src="img/weixin.png" onload='if (this.width>20 || this.height>20) if (this.width/this.height>=20/20) this.width=30 ; else this.width=30;'></a> </div>
<div class="menu-blank_img2"></div>
<div class="other_logan_img"><a href="https://www.alipay.com/"><img src="img/zhifubao.png" onload='if (this.width>20 || this.height>20) if (this.width/this.height>=20/20) this.width=30 ; else this.width=30;'> </a> </div>
<div class="menu-blank_img2"></div>
<div class="other_logan_img"><a href="https://weibo.com"><img src="img/sina.png" onload='if (this.width>20 || this.height>20) if (this.width/this.height>=20/20) this.width=30 ; else this.width=30;'></a> </div>
<div class="menu-blank_img2"></div>
<div class="other_logan_img"><a href="http://www.renren.com/"><img src="img/renren.png" onload='if (this.width>20 || this.height>20) if (this.width/this.height>=20/20) this.width=30 ; else this.width=30;'></a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
css源码：
.allbg{
/* border:1px solid #F00; */
width:1500px; height:800px;
}
.backwhite{
float: left;
/* border:1px solid #F00; */
width:150px; height:800px;
}
.backimg{
float: left;
/* border:1px solid #F00; */
width:1230px; height:800px;
background-image:url(../img/201801161116219594.jpg)
}
.img_blank{
float: left;
/* border:1px solid #F00; */
width:150px; height:800px;
}
.login{
float: left;
/* border:1px solid #F00; */
width:320px; height:800px;
}
.menu-head1{
/* border:1px solid #F00; */
width:320px; height:60px;
}
.menu{
/* border:1px solid #F00; */
width:320px; height:400px;
background-color: white;
}
.menu-head2{
border:1px solid black;
width:320px; height:50px;
}
.text{
/* border:1px solid #F00; */
width:320px; height:50px;
font-size: 20px;
}
.menu-blank{
/* border:1px solid #F00; */
width:320px; height:10px;
}
.password{
/* border:1px solid #F00; */
width:320px; height:50px;
font-size: 20px;
}
.loganin{
/* border:1px solid #F00; */
width:320px; height:50px;
font-size: 20px;
background-color: #50AFFF;
}
.new_loganin{
/* border:1px solid #F00; */
width:320px; height:50px;
font-size: 20px;
background-color:white
}
.other_logan{
/* border:1px solid #F00; */
width:320px; height:20px;
font-size: 8px;
text-align: center;
}
.other_logan_img{
/* border:1px solid #F00; */
width:30px; height:30px;
float: left;
}
.menu-blank_img{
/* border:1px solid #F00; */
width:20px; height:30px;
float: left;
}
.menu-blank_img2{
/* border:1px solid #F00; */
width:10px; height:30px;
float: left;
}
效果截图：
