时常不敢相信自己也走在了奔三的道路上，身边的好友一个个恋爱、结婚、生子、买房、买车，而我仿佛还是那个二十多岁的少年，时间让我长了年岁，却没有让我变成一个合格的大人。不过也不要紧，只要开始了，一切都还不算太晚，别给自己太多额外的压力，轻松一点，向善，向上，努力做那个自己一直想成为的男孩。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/register.css">
<link rel="shortcut icon" href="favicon.ico" />
<title>个人注册</title>
</head>
<body>
<div class="w">
<header>
<div class="logo">
<a href="index.html"><img src="image/2.jpg" alt=""></a>
</div>
</header>
<div class="registerarea">
<h3>
注册新用户
<div class="login">
我有账号, 去<a href="">登陆</a>
</div>
</h3>
<div class="regis_form">
<form action="">
<ul>
<li><label for="">手机号: </label> <input type="text" class="inp"> <i class="i_error"></i><span class="error">手机号输入错误，请重新输入</span></li>
<li><label for="">短信验证码: </label> <input type="text" class="inp"> <i class="i_success"></i> <span class="success">短信验证码输入正确</span></li>
<li><label for="">登陆密码: </label> <input type="password" class="inp"> <span>登陆密码输入正确</span></li>
<li class="safe">安全程度 <em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></li>
<li><label for="">确认密码: </label> <input type="password" class="inp"> <span>登陆密码输入正确</span></li>
<li class="agree"><input type="checkbox" >同意协议并注册
<a href="#">《王子商城必须遵守协议》</a>
</li>
<li>
<input type="submit" value="提交注册" class="btn" >
</li>
</ul>
</form>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?j1r69j');
src: url('../fonts/icomoon.eot?j1r69j#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?j1r69j') format('truetype'),
url('../fonts/icomoon.woff?j1r69j') format('woff'),
url('../fonts/icomoon.svg?j1r69j#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.w{
width: 1200px;
margin: 0 auto;
}
.logo{
height: 84px;
border-bottom: 2px solid #c81523;
padding-top: 18px;
}
.registerarea{
height: 522px;
border: 1px solid #cccccc;
margin-top: 20px;
}
.registerarea h3{
height: 42px;
border-bottom: 1px solid #cccccc;
background-color: #ececec;
font-size: 18px;
font-weight: 400;
line-height: 42px;
padding: 0 10px ;
}
.login{
font-size: 14px;
float: right;
}
.login a{
color: #c81523;
}
.regis_form{
width: 600px;
margin: 50px auto 0;
/*background-color: greenyellow;*/
}
.regis_form ul li .inp{
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.regis_form ul li label{
display: inline-block;
width: 88px;
text-align: right;
}
.regis_form ul li{
margin-top: 10px;
}
.error{
color: #c81523;
}
.i_error::before{
content: '\ea0f';
font-family: 'icomoon';
color: red;
}
.i_success::before{
content: '\ea10';
font-family: 'icomoon';
color: green;
}
.success{
color: green;
}
.safe{
margin-left: 170px;
}
.safe em{
color: #ffffff;
padding: 0 12px;
}
.ruo{
background-color: #de1111;
}
.zhong{
background-color: #40b83f;
}
.qiang{
background-color: #f79100;
}
.agree{
margin-left: 90px;
}
.agree input{
vertical-align: middle;
}
.agree a{
color: #1ba1e6;
}
.btn{
background-color: #e60012;
color: #ffffff;
width: 200px;
height: 34px;
margin: 30px 0 0 115px;
}