div+css登陆界面案例2

浏览数：45 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        margin: 0px;
            padding:0px;
            font-size:12px;
            background-color: #1873aa;
            text-align: center;
            overflow: hidden;
    }
    #pagetop{
        background-image: url(images/head.gif);
        width: 1432px;
        height: 113px;

    }
    #pagecenter h1{
        text-align: left;
        margin-left: 50px;
        margin-top: 50px;
    }
    #pagecenter p{
        text-align: left;
        margin-left: 50px;
        font-size: 15px;

    }
    #input div{
        font-size: 17px;

    }
    #input div input{
        margin-left: 30px;
        margin-top: 8px;
        width:230px;
        height: 18px;
    }
    #form{
        text-align: left;
        margin-left: 50px;
    }
    #btn input{
        width: 80px;
        height: 30px;
        cursor:pointer;
    }
    #btn input:hover{
        cursor:hand;
    }
    #btn1{
        text-align: center;
        margin-top: 20px;
        margin-left: 130px;
    }
    #btn2{
        margin-top: 20px;
        margin-left: 30px;
    }
    #input img{
        width: 30px;
        height:30px;

    }
    </style>
</head>
<body>
    <div id="container">
        <div id="pagetop">
        </div>
        <div id="pagecenter">
            <h1>注册须知：</h1>
            <p>1:在本站注册的会员，必须遵守《互联网电子公告服务管理规定》，不得在本站诽谤他人，侵犯他人隐私，侵犯他人知识产权，传播病<br />毒政治言论，商业机密等信息。</p>
            <p>2：在所有本站发表的文章，本站都具有最终编辑权，并且保留用于向第三方印刷或者发表的权利，如果您的资料不齐全，我们将有权不作任<br />何通知使用你在本站发表的作品</p><br />
        </div>
        
        <div id="form">
            <form>
                <div id="input">
                    <div>
                        登陆账号：
                        <input type="text" name="username" />
                    </div>
                    <div>
                        重复密码：
                        <input type="password" name="password">
                    </div>
                    <div>
                        确认密码：
                        <input type="password" name="password">
                    </div>
                    <div>
                        电子邮箱：
                        <input type="password" name="password">
                    </div>
                    <div>
                        您的昵称：
                        <input type="password" name="password">
                    </div>
                    <div>
                        图片认证：
                        <input type="password" name="password">
                        <img src="images/yanzheng.gif">
                    </div>
                </div>
                <div id="btn">
                    <input id= "btn1" type="submit" value="重置" />
                    <input id= "btn2" type="button" value="注册" />
                </div>
            </form>
        </div>
        
        
    </div>
    
</body>
</html>