<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <link rel="stylesheet" href="css/register.css" type="text/css" /> <!--<script src="js/rejister.js" type="text/javascript"></script>--> </head> <body> <div id="mainContent"> <!--表单--> <form> <!--帐号--> <div class="row"> <div>帐号:</div> <input type="text" placeholder=" 请输入帐号"/> </div> <!--密码--> <div class="row"> <div>密码:</div> <input type="password" placeholder=" 请输入密码"/> </div> <!--确认密码--> <div class="row"> <div >确认密码:</div> <input type="password" placeholder=" 请确认密码"/> </div> <!--手机号--> <div class="row"> <div>手机号:</div> <input placeholder=" 请输入手机号"/> </div> <!--邮箱--> <div class="row"> <div>邮箱:</div> <input placeholder=" 请输入邮箱"/> </div> <!--性别选项--> <div class="row"> <div>性别:</div> <input class="choose" type="radio" name="sex" value="男" checked="true"/ >男 <input class="choose" type="radio" name="sex" value="女"/>女 </div> <!--兴趣爱好--> <div class="row"> <div>兴趣爱好:</div> <input class="choose" type="checkbox"/>打篮球 <input class="choose" type="checkbox"/>踢足球 <input class="choose" type="checkbox"/>跑步 <input class="choose" type="checkbox"/>游泳 <input class="choose" type="checkbox"/>看书 <input class="choose" type="checkbox"/>唱歌 </div> <!--上传头像--> <div class="row"> <div>上传头像:</div> <input type="file" /> </div> <!--地址--> <div class="row"> <div>地址:</div> <select class="province" > <option>省</option> <option>北京</option> <option>广东</option> </select> <select class="city"> <option>市</option> <option>广州</option> <option>深圳</option> </select> <select class="district"> <option>区</option> <option>白云</option> <option>龙岗区</option> </select> </div> <!--自我介绍--> <div class="row self"> 自我介绍 <textarea rows="5" cols="25"></textarea> </div> <!--提交按钮--> <div class="row"> <input id="submintBtn" onclick="change()" type="submit" value="提交"/> </div> </form> </div> </body> </html>
#mainContent{ /*background: orange;*/ margin-top: 30px; width: 500px; /*margin-left: 20%;*/ } #mainContent .row{ /*background: blueviolet;*/ margin-top: 10px; height: auto; line-height: 30px; font: arial; font-size: 13px; } #mainContent .row div{ /*background: cyan;*/ float: left; display: inline-block; width: 90px; text-align: right; font: arial; font-size: 13px; } #mainContent .row input{ /*float: left;*/ /*background: olive;*/ height: 25px; width: 180px; border: 1px solid #666666; border-radius: 5px; font: arial; font-size: 13px; margin-left: 10px; } #mainContent .row input:hover{ border: 1px solid deepskyblue; } #mainContent .row .choose{ width: auto; height: 15px; line-height: 30px; } #mainContent .row select{ margin-left: 10px; } #mainContent .self{ /*background: greenyellow;*/ margin-left: 30px; } #mainContent .row textarea{ /*background: gold;*/ /*margin-left: 50px;*/ border: 1px solid #666666; } #mainContent #submintBtn{ background: #666666; width:120px; /*margin-top: 100px;*/ margin-left: 110px; } #mainContent #submintBtn:hover{ background: deepskyblue; }