注冊頁面的簡單搭建（H5）

本文轉載自查看原文 2016-11-08 13:58 2894 H5

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue寫H5注冊頁面一個簡單的注冊頁面 Vue　簡單的注冊頁面完成登錄與注冊頁面的前端完成登錄與注冊頁面的前端注冊頁面的一些記錄完成登錄與注冊頁面的前端完成登錄與注冊頁面的前端 HTML5，簡單的注冊頁面 Servlet(4)：一個簡單的注冊頁面