1头部
register.html
<!-- 注册页面主体区域 registerarea --><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登录</a></div></h3></div><!-- 注册页面主体区域 registerarea -->
register.css
.registerarea {
margin-top: 20px;
height: 524px;
border: 1px solid #dfdfdf;
}
.registerarea h3 {
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
background-color: #ececec;
border-bottom: 1px solid #ddd;
}
.registerarea h3 .login {
float: right;
font-size: 14px;
}
.registerarea h3 .login a {
color: #c81623;
}
2
register.html
<!-- 注册页面主体区域 registerarea -->
<div class="registerarea">
<h3>注册新用户
<div class="login">我有账号，去<a href="#">登录</a></div>
</h3>
<div class="reg_form">
<ul>
<li><label for="">手机号：</label>
<input type="text" name="" id="">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
<li><label for="">短信验证码：</label>
<input type="text" name="" id="">
<span class="success"><i class="success_icon"></i>短信验证码输入正确</span>
</li>
<li><label for="">登录密码：</label>
<input type="text" name="" id="">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
<li><label for="">确认密码：</label>
<input type="text" name="" id="">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
</ul>
</div>
</div>
<!-- 注册页面主体区域 registerarea -->
register.css
/* 注册页面主体区域 registerarea start */
.registerarea {
margin-top: 20px;
height: 524px;
border: 1px solid #dfdfdf;
}
.registerarea h3 {
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
background-color: #ececec;
border-bottom: 1px solid #ddd;
}
.registerarea h3 .login {
float: right;
font-size: 14px;
}
.registerarea h3 .login a {
color: #c81623;
}
.registerarea .reg_form {
width: 550px;
margin: 55px auto 0;
}
.registerarea .reg_form ul li {
margin-bottom: 20px;
}
.registerarea .reg_form label {
display: inline-block;
width: 88px;
text-align: right;
}
.registerarea .reg_form input {
width: 241px;
height: 36px;
border: 1px solid #ccc;
}
.registerarea .reg_form .error {
color: #df3033;
}
.registerarea .reg_form .success {
color: green;
}
.error_icon,
.success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url(../images/error.png) no-repeat;
}
.success_icon {
background: url(../images/success.png) no-repeat;
}
/* 注册页面主体区域 registerarea end */
3
register.html
<!-- 注册页面主体区域 registerarea -->
<div class="registerarea">
<h3>注册新用户
<div class="login">我有账号，去<a href="#">登录</a></div>
</h3>
<div class="reg_form">
<form action="">
<ul>
<li><label for="">手机号：</label>
<input type="text" name="" id="" class="inp">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
<li><label for="">短信验证码：</label>
<input type="text" name="" id="" class="inp">
<span class="success"><i class="success_icon"></i>短信验证码输入正确</span>
</li>
<li><label for="">登录密码：</label>
<input type="text" name="" id="" class="inp">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
<li class="saft">安全程度<em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></li>
<li><label for="">确认密码：</label>
<input type="text" name="" id="" class="inp">
<span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
</li>
<li class="agree">
<input type="checkbox">同意协议并注册<a href="#">《知果果用户协议》</a>
</li>
<li>
<input type="button" value="完成注册" class="btn">
</li>
</ul>
</form>
</div>
</div>
<!-- 注册页面主体区域 registerarea -->
<!-- 底部版权 footer -->
<footer class="footer">
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a>|
<a href="#">联系我们</a>|
<a href="#">联系客服</a>|
<a href="#">商家入驻</a>|
<a href="#">营销中心</a>|
<a href="#">手机品优购</a>|
<a href="#">友情链接</a>|
<a href="#">销售联盟</a>|
<a href="#">品优购社区</a>|
<a href="#">品优购公益</a>|
<a href="#">English Site</a>|
<a href="#">Contact U</a>|
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
<!-- 底部版权 end -->
register.css
/* 注册页面主体区域 registerarea start */
.registerarea {
margin-top: 20px;
height: 524px;
border: 1px solid #dfdfdf;
}
.registerarea h3 {
height: 42px;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
background-color: #ececec;
border-bottom: 1px solid #ddd;
}
.registerarea h3 .login {
float: right;
font-size: 14px;
}
.registerarea h3 .login a {
color: #c81623;
}
.registerarea .reg_form {
width: 550px;
margin: 55px auto 0;
}
.registerarea .reg_form ul li {
margin-bottom: 20px;
}
.registerarea .reg_form label {
display: inline-block;
width: 88px;
text-align: right;
}
.registerarea .reg_form .inp {
width: 241px;
height: 36px;
border: 1px solid #ccc;
}
.registerarea .reg_form .error {
color: #df3033;
}
.registerarea .reg_form .success {
color: green;
}
.error_icon,
.success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url(../images/error.png) no-repeat;
}
.success_icon {
background: url(../images/success.png) no-repeat;
}
.saft {
margin-left: 176px;
}
.saft em {
padding: 0 12px;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
margin: 42px 87px 0;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: #1ba1e6;
}
.reg_form .btn {
margin: 25px 100px 0;
width: 200px;
height: 34px;
color: #ffffff;
background-color: #c81623;
}
/* 注册页面主体区域 registerarea end */
/* 底部版权 start*/
.footer .mod_copyright {
padding-top: 15px;
text-align: center;
}
.footer .mod_copyright .links {
margin-bottom: 10px;
}
.footer .mod_copyright .links a {
padding: 0 10px;
}
.footer .mod_copyright .copyright {
line-height: 20px;
}
/* 底部版权 end*/
若有收获，就点个赞吧
0 人点赞
