<!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;
}
