...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>栗子登录器</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
background: url(img/简约实景轻设计横版视频封面套装.jpg) no-repeat center/100% 100% fixed;
}
.anniu{
width: 300px;
height: 60px;
position: absolute;
top: 60px;
right: 60px;
}
.zhuce{
width: 150px;
height: 160px;
border: 3px solid white;
border-radius: 35px;
}
.anniu div{
float: left;
width: 120px;
height: 60px;
border: 2px solid white;
border-radius: 35px;
font-size: 25px;
color: white;
text-align: center;
line-height: 60px;
}
.qiyu{
width: 200px;
height: 220px;
border: 1px solid white;
box-sizing:35px ;
font-size:25px ;
color: aqua;
text-align:center ;
line-height: -60px;
font: left;
margin: 0 10px;
}
.centerbox{
width: 450px;
height: 400px;
margin: auto;
padding:relative ;
top: -60px;
background: white;
border-radius: 20px;
}
.box1,.box2,.box3,.box4,.box5 {
width: 370px;
height: 60px;
margin: 1px auto 0;
}
.box1 h2{
color: grey;
line-height: 60px;
}
.box2,.box3{
background-color:1px solid rgb(199, 199, 188);
border-radius:30px;
margin: ;
}
.box2 input,.box3 input{
width: 90%;
height: 90%;
border: 0;
margin: 3px 20px;
font-size: 18px;
border: none;
outline: none;
}
.box4{
line-height: 60px;
color: gray;
}
.box4 a{
float: right;
color: grey;
font-weight: 100;
}
.box5 input{
width: 100%;
height: 100%;
background-color: gray;
line-height: center;
color: white;
font-size: 20px;
border-radius: 30px;
outline: none;
border: none;
font-weight: 800;
}
.box5 input:hover{
width: 100%;
height: 100%;
background-color: orangered;
line-height: center;
color: white;
font-size: 20px;
border-radius: 30px;
outline: none;
border: none;
font-weight: 800;
}
</style>
</head>
<body>
<div>
<div class="anniu">
<div class="qiyu"> 消息</div>
<div class="home">首页项</div>
</div>
</div>
<div>
<div class="centerbox">
<div class="box1">
<h2>栗子登录</h2>
</div>
<div class="box2">
<input type="text" placeholder="请输入栗子账户" />
</div>
<div class="box3">
<input type="password" placeholder="请输入密码" />
</div>
<div class="box4">
<input type="checkbox" />下次自动登录
<a href="#">注册账户</a>
</div>
<div class="box5"><br>
<a href="https:www.baidu.com" ><input type="button" value="登 录 账 户" /></a>
</div>
</div>
</body>
</html>
...