<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>注册页面</title> <style type="text/css"> * { margin: 0px; padding: 0px; } a:visited, a:link, a:active { text-decoration:none; color:#036; } a:hover { color:#09C; text-decoration:underline; } body { font-size:12px; background:#73CFF1 url(images/wrapbg.jpg) center top no-repeat; } #container { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #header { height: 88px; } #content { margin:0 auto; width:720px; padding:25px 0 25px 0; } #regtip { background-image: url(images/regBg.png); height: 56px; padding-top: 25px; padding-left: 53px; color:#1E85AE; } #regtip h2 { margin-bottom:3px; line-height:20px; color:#1E85AE; font-family: "MicroSoft YaHei", "SimHei"; font-size:20px } #wrapper { background-color: #FFF; } li { list-style:none; } #formcontent li { padding:12px 0; clear:both; } #formcontent .l { height:1em; float:left; width:150px; text-align:right; padding-right:10px; font-weight:bold; } #formcontent .c { /*height:1em;*/ } #formcontent .r { height:1em; float:right; width:220px; color:#999 } #shadow { background-image: url(images/openShadow.png); background-repeat: no-repeat; height: 13px; } #footer { font-family: Arial, Helvetica, sans-serif; color: #FFF; text-align: center; padding: 20px; } </style> </head> <body> <div id="container"> <div id="header"></div> <form action="#" method="get" name="MyForm" id="myForm"> <div id="wrapper"> <div id="regtip"> <h2>即刻注册</h2> <p>欢迎你的注册，请提供基本信息</p> </div> <div id="content"> <ul id="formcontent"> <li> <div class="l">用户名</div> <div class="r"><input type="image" src="images/check.png"/></div> <div class="c"> <input type="text" name="username" id="username"/> </div> </li> <li> <div class="l">密码</div> <div class="r">这里是一些提示信息</div> <div class="c"> <input type="password" name="password" id="password"/> </div> </li> <li> <div class="l">确认密码</div> <div class="r">这里是一些提示信息</div> <div class="c"> <input type="password" name="password" id="password"/> </div> </li> <li> <div class="l">性别</div> <div class="r">这里是一些提示信息</div> <div class="c"> <label> <input type="radio" name="sex" value="male" checked="checked"/> 男</label> <label> <input type="radio" name="sex" value="female"/> 女</label> </div> </li> <li> <div class="l">爱好</div> <div class="r">这里是一些提示信息</div> <div class="c"> <label> <input type="checkbox" name="hobbie" value="football"/> 电影</label> <label> <input type="checkbox" name="hobbie" value="baskeball"/> 游戏</label> <label> <input type="checkbox" name="hobbie" value="volleyball"/> 编程</label> </div> </li> <li> <div class="l">出生年月</div> <div class="r">这里是一些提示信息</div> <div class="c"> <select name="n"> <option value="n1">1993</option> <option value="n2">1994</option> </select> 年 <select name="y"> <option value="y">12</option> <option value="y">11</option> </select> 月 <select name="r"> <option value="r">1</option> <option value="r">2</option> </select> 日 </div> </li> <li> <div class="l">所在城市</div> <div class="r">这里是一些提示信息</div> <div class="c"> <select name="sheng"> <option value="sheng1">浙江</option> <option value="sheng2">广东</option> </select> 省 <select name="s" disabled="disabled"> <option value="s1">温州</option> <option value="s2">杭州</option> </select> 市 </div> </li> <li> <div class="l">头像上传</div> <div class="r">这里是一些提示信息</div> <div class="c"> <input type="file" name="myFile" id="myFile"/> </div> </li> <li> <div class="l"></div> <div class="r"></div> <div class="c"> <label> <input type="checkbox" name="hobbie2" value="tongyi" checked="checked"/> 同意<a href="#">条款</a></label> </div> </li> <li> <div class="l"></div> <div class="r"></div> <div class="c"> <input type="submit" value="登陆"/> <input type="reset" value="重写"/> <input type="button" value="返回"/> </div> </li> </ul> </div> </div> </form> <div id="shadow"></div> <div id="footer">Modified by <a href="http://www.weibo.com/clementyoung" target="_blank">@老杨Clement</a> © 2012 All Rights Reserved.</div> </div> </body> </html>