看了知乎的 注册页后，就模仿着做了一个出来， 不喜勿喷
body{
background: url('../img/sign_bg.db29b0fbd2f78dd8c1b7.png') no-repeat fixed;
background-size: cover;
background-color: rgb(184,229,248);
}
.container{
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -215px;
width: 430px;
height: 500px;
border: 1px solid transparent;
background: #ffffff;
border-radius: 3px;
}
.title>h1{
margin: 20px;
padding: 0;
text-align: center;
color: rgb(0,132,255);
font-size: 4em;
font-family: 'myfont';
}
.title>h2{
margin: 0;
padding: 0;
text-align: center;
color: rgb(0,132,255);
font-weight: 400;
}
@font-face{
font-family: 'myfont';
src: url('../font/jyx.ttf');
}
.input-group{
position: relative;
width: 350px;
height: 48px;
line-height: 48px;
border-bottom: 1px solid rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.form-control{
/* 将输入框的所有外边距设置为40像素 */
margin:40px;
}
.preffix{
width: 100px;
color:rgba(0,0,0,0.5);
}
.preffix::after{
position: relative;
padding-left: 20px;
content: '|';
color: rgba(0,0,0,0.3);
}
.input-group>div{
float: left;
}
.input-phone{
width: 250px;
height: 100%;
}
.input-group input[type="text"]{
width: 100%;
border: 0;
padding: 0 5px;
outline: none;
}
::placeholder{
color: #948e8e;
}
.tips{
position: absolute;
right: 0;
top: 0;
}
.btn{
margin-top: 20px;
width: 100%;
height: 36px;
border-radius: 5px;
color: #ffffff;
background:rgb(0,132,255) ;
border: 0;
}
.links{
padding: 20px 0;
font-size: 14px;
color: rgba(0,0,0,0.5);
}
.links,.readme{
float: left;
}
.links,.ser-no{
float: right;
}
.quit-login{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 59px;
text-align: center;
line-height: 59px;
background: rgb(246,246,246);
border: 1px solid rgb(235,235,235);
}
a{
color: rgba(0,0,0,0.3);
}
a:hover{
color: rgba(16, 34, 235, 0.904);
}
上面是css代码，下面的是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册-知乎</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/zhihu.css">
</head>
<body>
<div class="container">
<div class="title">
<h1>知乎</h1>
<h2>注册知乎，发现更大的世界</h2>
</div>
<!-- 表单区域 -->
<div class="form-control" style="text-align:right">
<div class="input-group">
<div class="preffix">中国 +86</div>
<div class="input-phone">
<input type="text" placeholder="请输入手机号" name="" id="" >
</div>
</div>
<div class="input-group" >
<input type="text" name="" placeholder="请输入短信验证码">
<a href="" class="tips">获取短信验证码</a>
</div>
<a href="">接收语音验证码</a>
<button class="btn">注册</button>
<div class="links">
<div class="readme">
<a href="">注册即代表同意《知乎协议》《隐私政策》</a>
</div>
<div class="ser-no">
<a href="" id="co">注册机构号</a>
</div>
</div>
</div>
<!-- 快捷登录 -->
<div class="quit-login">
已有账号？<a href="">登录</a>
</div>
</div>
</body>
</html>