abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <style type="text/css"> *{ margin: 0;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <style type="text/css"> *{ margin: 0; } #main-box{ position: relative; margin: auto; width: 585px; height: 600px; padding: 35px 30px; margin-top: 150px; margin-bottom: 100px; box-shadow: 1px 1px 4px #767676; } input{ width: 285px; height: 42px; border-radius: 4px; border: 1px solid #DCE4E6; background: #F3F6F8; margin-top: 8px; padding-left: 20px; font-size: 12px; margin-bottom: 10px; } #btn-register{ background: #31B968; border: 0; color: #fff; width: 115px; height: 44px; border-radius: 4px; } input::-webkit-input-placeholder{ /*设置placeholder属性中文字的颜色*/ color: #CECFD0; } input[type="radio"]{ width: 20px; height: 20px; margin-right: 8px; opacity: 0; } .advice{ width: 16px; height: 16px; display: inline-block; background-image: url("images/icon-unchecked.png"); background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-top: -4px; margin-right: 8px; } input[type="radio"]:checked+.advice{ background-image: url("images/icon-checked.png"); } span{ margin-right: 50px; } input[type="checkbox"]{ width: 15px; height: 13px; margin-bottom: 20px; margin-top: 30px; } tr td:first-child{ width: 385px; } p{ color: #666682; } #login{ text-decoration: none; color: #31B968; } img{ margin-top: 10px; width: 36px; height: 36px; margin-right: 20px; } </style> </head> <body> <div id="main-box"> <form> <table> <tr> <td><input type="text" name="tel" placeholder="请输入手机号码"></td> <td rowspan="10" valign="top" ><!-- style="border-left: 1px dashed #ccc; " --> <p>已经注册过?<p> <a href="#" id="login">直接登录 →</a><br><br> <p>使用以下账号直接登录</p> <img src="images/weibo.png"><img src="images/weixin.png"><img src="images/cat.png"><br> <img src="images/qq.png"><img src="images/cblog.png"> </td> </tr> <tr> <td><input type="text" name="email" placeholder="请输入邮箱地址"></td> </tr> <tr> <td><input type="text" name="username" placeholder="请输入昵称,至少2个字符,至多20个"></td> </tr> <tr> <td><input type="password" name="pwd" placeholder="请输入密码,字符或特殊符号和数字结合"></td> </tr> <tr> <td><input type="password" name="pwd" placeholder="请再次输入密码"></td> </tr> <tr> <td><input type="text" name="code1" placeholder="请输入短信验证码" style="width: 162px;"> <button id="btn-register">获取验证码</button></td> </tr> <tr> <td><input type="email" name="code2" placeholder="请输入邮箱验证码" style="width: 162px;"> <button id="btn-register">获取验证码</button></td> </tr> <tr> <td> <input type="radio" name="sex" id="adviceRadio1" checked hidden><label for="adviceRadio1" class="advice"></label><span>男士</span> <input type="radio" name="sex" id="adviceRadio2" hidden><label for="adviceRadio2" class="advice"></label><span>女士</span> </td> </tr> <tr> <td><input type="checkbox" name="accept" value="1"> <font style="color: #666;font-size: 13.5px;">已阅读并同意</font><font style="color: blue;font-size: 13.5px;">服务条款</font></td> </tr> <tr> <td><button id="btn-register" style="width: 305px;">注册</button></td> </tr> </table> </form> </div> </body> </html>
这是一个实用HTML+css实现的一个注册页面。通过web前端HTML基础部分的学习,我了解了HTML基础语法知识,在完成小案例的过程中,发现还有很多要学习的,这只是冰山一角而已。感觉做的不咋样,还有很多东西欠缺,要继续加油。没有加上验证码部分,有点遗憾,会继续完善的。
Correcting teacher:天蓬老师Correction time:2018-11-18 09:46:37
Teacher's summary:用table布局是一种方案,真正考验技术的是使用div+css布局