Html学习之十九（表格与表单学习--邮箱注册页面设计）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邮箱注册</title> <style type="text/css"> h1{ border: 1px solid white; width: 100%; height: 50px; background: lightblue; color: white; padding-top: 10px; font-family: "微软雅黑"; } .a{ border: 1px solid black; margin: 0px; /*background-color: darkgray;*/ font-family: verdana,sans-serif; font-size: 14px; padding: 10px; font-weight: bold; text-decoration: none; cursor: default; text-align: center; outline: none; } .txt-tips{ font-family: verdana,sans-serif; text-align: left; line-height: 8px; color: darkgray; font-size: smaller; } .a1,.a2,.a3{ font-weight: bold; color: black; cursor: default; /*display: block;*/ height: 35px; line-height: 35px; text-align: center; font-size: 14px; outline: none; list-style: none; font-family: verdana,sans-serif; } .d{ border: solid darkgray 1px; color: #555; font-size: 14px; text-align: left; font-family: verdana,sans-serif; line-height: 28px; } </style> </head> <body> <form action="#" method="post"> <h1>欢迎注册无限容量的网易云邮箱！邮箱地址可以登录其它网易云旗下产品。</h1> <br /> <br /> <a tabindex="-1" class="a1" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;"> <span class="a">注册字母邮箱</span> </a> <a tabindex="-1" class="a2" style="text-decoration: none;" onclick="_Global.main.turnOn(null,'tab');return false;" href="#;"> <span class="a">注册手机号码邮箱</span> </a> <a tabindex="-1" class="a3" style="text-decoration: none;" onclick="_Global.main.turnOn();return false;" href="#;"> <span class="a" >注册VIP邮箱</span> </a> <br /> <br /> *邮件地址 <input type="email" value="" />@ <select size="1"> <option>163.com</option> <option>163.com</option> <option selected="selected">163.com</option> </select> <br /> <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span> <br /> <br /> *密码 <input type="password" value=""/> <br /> <span class="txt-tips">6~16个字符，区分大小写</span> <br /> <br /> *确认密码 <input type="password" value=""/> <br /> <span class="txt-tips">请再次填写密码</span> <br /> <br /> *手机号码 <input type="tel" value=""/> <br /> <span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span> <br /> <br /> *验证码 <input type="text" autocomplete="off" value=""/> <br /> <span class="txt-tips">请填写图中字符，不区分大小写</span> <br /> <img width="120" height="50"style="cursor: pointer;" alt="验证码" src="../img/call.jpg"> <a tabindex="-1" href="javascript:void(0);">看不清楚？换张图片</a> <br /> <br /> <span class="d">免费获取验证码</span> <br /> *短信验证码 <input type="text" autocomplete="off"> <br /> <span class="txt-tips">请查收手机短信，并填写短信中的验证码</span> <br /> <br /> <input tabindex="-1" type="checkbox" checked="checked">同意 <a tabindex="-1" href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a>和 <a tabindex="-1" href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a> <br /> <br /> <input type="submit" value="立即注册"> </form> </body> </html>
结果：
