代码改变世界

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

2016-11-08 13:58  甘雨路  阅读(3958)  评论(0)  编辑  收藏  举报 

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