您的位置：首页 > Web前端 > HTML5

注册页面的简单搭建（H5）

2016-11-08 13:58 281 查看 


<!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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航