实现百度注册界面
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box {
background-image: url(img/reg_bg_min.jpg);
background-repeat: no-repeat;
width: 2880px;
height: 1600px;
}
#Nei {
border-radius: 20px;
width: 850px;
height: 1100px;
background-color: white;
opacity: 0.9;
position: relative;
left: 1800px;
top: 300px;
}
.th1 {
font-weight: 200;
font-size: 35px;
color: #333;
line-height: 170px;
padding-left: 50px;
text-align: left;
font-weight: 30;
}
h1 {
font-size: 100px;
text-align: left;
padding-left: 50px;
padding-top: 50px;
}
h3 {
font-size: 30px;
text-align: left;
color: gray;
padding-left: 50px;
padding-bottom: 40px;
}
.th2 {
font-weight: 200;
margin-left: 20px;
width: 550px;
height: 60px;
padding-left: 10px;
border-radius: 10px;
font-size: 35px;
opacity: 0.4;
border: 1px solid #E0E0E0;
}
.Yan {
font-weight: 200;
margin-left: 20px;
width: 320px;
height: 60px;
padding-left: 10px;
border-radius: 10px;
font-size: 35px;
opacity: 0.4;
border: 1px solid #E0E0E0;
}
.YanZheng {
background-color: #FFFFFF;
font-weight: 200;
margin-left: 10px;
width: 220px;
height: 70px;
border-radius: 10px;
font-size: 25px;
}
.th3 {
margin-left: 90px;
width: 650px;
height: 80px;
padding-left: 10px;
border-radius: 10px;
font-size: 40px;
opacity: 0.4;
background: #BDCEFC;
color: white;
font-weight: 700;
}
.YueDu {
padding-top: 30px;
text-align: center;
font-size: 20px;
padding-bottom: 20px;
}
.Choose {
width: 18px;
height: 18px;
}
a{
text-decoration: none;
}
.KeFu a {
text-decoration: none;
color: white;
}
.BaiDu {
position: absolute;
left: 200px;
top: 150px;
}
.Text h1 {
position: absolute;
left: 300px;
top: 500px;
color: white;
font-size: 130px;
}
.Text h2 {
position: absolute;
left: 350px;
top: 720px;
color: white;
font-size: 50px;
letter-spacing: 3.81px;
font-weight: 300;
}
.KeFu{
position: absolute;
left: 150px;
top: 1420px;
color: white;
font-size: 30px;
letter-spacing: 3.81px;
font-weight: 300;
}
</style>
</head>
<body>
<div id="box">
<div id="Nei">
<div>
<h1>欢迎注册</h1>
<h3>已有账号?<a href="">登录</a></h3>
</div>
<div>
<label for="用户名" class="th1">用户名</label>
<input class="th2" type="text" id="用户名" placeholder="请设置用户名" />
</div>
<div>
<label for="手机号" class="th1">手机号</label>
<input class="th2" type="text" id="手机号" placeholder="可用于登录和找回密码" />
</div>
<div>
<label for="密码" class="th1">密 码</label>
<input class="th2" type="password" id="密码" placeholder="请设置登录密码" />
</div>
<div>
<label for="验证码" class="th1">验证码</label>
<input type="text" class="Yan" placeholder="请输入验证码" />
<input class="YanZheng" type="button" value="获取验证码" />
</div>
<div>
<input type="button" value="注册" class="th3" />
</div>
<div class="YueDu">
<input type="checkbox" class="Choose" /> 阅读并接受<a href="">《百度用户协议》</a>及<a href="">《百度隐私权保护声明》</a>
</div>
</div>
<div class="BaiDu"><img src="img/baidu.png" /></div>
<div class="Text">
<h1>用科技</h1>
<h2>让复杂的世界更简单</h2>
</div>
<div>
<div class="KeFu"><a href="http://www.baidu.com">帮助中心</a> | <a href="http://www.baidu.com"><img src="img/service-2x.png"/></a></div>
</div>
</div>
</body>
</html>
实现效果
