百度注册:
代码:
<div class="box">
<form action="1.html" method="post">
<div class="form-item clearfix">
<div class="title">
<label for="username">用户名</label>
</div>
<div class="inp">
<input type="text" name="username" id="username" placeholder="请设置用户名" />
</div>
</div>
<div class="form-item clearfix">
<div class="title">
<label for="number">手机号</label>
</div>
<div class="inp">
<input type="text" name="number" id="number" placeholder="可用于登录和找回密码" />
</div>
</div>
<div class="form-item clearfix">
<div class="title">
<label for="checkcode">验证码</label>
</div>
<div class="inp">
<input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码" />
</div>
</div>
<div class="form-item clearfix">
<div class="title">
<label for="password">密码</label>
</div>
<div class="inp">
<input type="password" name="password" id="password" placeholder="请设置密码" />
</div>
</div>
<div class="form-item clearfix read-content">
<div class="title">
</div>
<div class="inp">
<input type="checkbox" name="read" class="read-inp" />
<span>
阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
</span>
</div>
</div>
<div class="form-item clearfix">
<div class="title">
</div>
<div class="inp">
<input type="submit" value="注册" class="register-btn"/>
</div>
</div>
</form>
</div>
样式:
<style>
*{
margin: 0;
padding: 0;
}
.clearfix:after{
clear: both;
display: block;
content: '';
}
.clearfix{
zoom: 1;
}
.box{
width: 440px;
}
.box form{
width: 100%;
}
.form-item{
margin-bottom: 22px;
}
.form-item .title{
float: left;
width: 78px;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #666;
text-align: right;
}
.form-item .inp{
float: right;
width: 350px;
height: 40px;
}
.form-item .inp input{
width: 100%;
height: 100%;
padding-left: 10px;
color: #757575;
font-size: 14px;
}
.form-item .inp input.read-inp{
width: 10px;
height: 10px;
padding: 0;
}
.read-content .title{
height: 15px;
}
.read-content .inp {
height: 15px;
color: #666;
font-size: 12px;
}
.read-content a{
color: #1b66c7;
text-decoration: none;
}
.box .form-item .inp .register-btn{
width: 350px;
height: 50px;
background: #3f89ec;
font-size: 16px;
color: #fff;
border: none;
}
</style>
效果图: