css简单练习4
用css所学知识完成百度注册界面并进行位置摆放
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box {
width: 2880px;
height: 1600px;
background-image: url(./img/reg_bg_min.jpg);
background-repeat: no-repeat;
}
.b1 {
background-color: #f0f1f4;
opacity: 0.9;
position: relative;
width: 750px;
height: 900px;
top: 200px;
left: 1800px;
border-radius: 10px;
}
.b2 {
margin-top: 10px;
width: 500px;
height: 50px;
padding-left: 10px;
font-size: 30px;
border-radius: 10px;
border-color: white;
}
.b5 div {
font-size: 40px;
padding-bottom: 20px;
padding-left: 50px;
padding-top: 40PX;
color: #333;
}
.b6 {
width: 200px;
height: 50px;
margin-top: 10px;
padding-left: 10px;
font-size: 25px;
border-radius: 10px;
}
.b7 {
width: 300px;
height: 50px;
margin-top: 10px;
padding-left: 10px;
font-size: 30px;
border-radius: 10px;
border-color: white;
}
p {
font-size: 25px;
padding-bottom: 40px;
padding-left: 50px;
color: #333;
}
h2 {
font-size: 70px;
padding-top: 20px;
padding-left: 50px;
color: #333;
}
.b3 {
opacity: 0.7;
margin-top: 10px;
width: 650px;
height: 80px;
font-size: 30px;
border-radius: 20px;
border-color: white;
background-color: #bdcefc;
}
.b4 {
width: 20px;
height: 20px;
margin-right: 5px;
}
.b8 {
font-size: 20px;
padding-top: 120px;
padding-left: 120px;
padding-top: 25PX;
color: #333;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="box">
<div class="b1">
<h2>欢迎注册</h2>
<p>已有账号?<a href="">登录</a></p>
<div class="b5">
<div>用户名:<input type="text" placeholder="请设置用户名" class="b2" /></div>
<div>手机号:<input type="text" placeholder="可用于登录和找回密码" class="b2" /></div>
<div>密 码:<input type="text" placeholder="请设置登录密码" class="b2" /></div>
<div>验证码:<input type="text" placeholder="输入验证码" class="b7" />
<input type="button" value="获取验证码" class="b6" /></div>
<div> <input type="button" value="注册" class="b3" /></div>
</div>
<div class="b8"> <input type="checkbox" class="b4" /> 请认真阅读 <a href="">《百度用户协议》</a>及<a href="">
《百度隐私保护声明》</a> </div>
</div>
</div>
</body>
</html>