时常不敢相信自己也走在了奔三的道路上,身边的好友一个个恋爱、结婚、生子、买房、买车,而我仿佛还是那个二十多岁的少年,时间让我长了年岁,却没有让我变成一个合格的大人。不过也不要紧,只要开始了,一切都还不算太晚,别给自己太多额外的压力,轻松一点,向善,向上,努力做那个自己一直想成为的男孩。
<!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; }