app注册登录界面如何设计

body{
                margin: 0;
                height: 100%;
                box-sizing: border-box;
                background-color: black;
                position: relative;
                color: white;
            }
            #bg{
                width: 100%;
                height: 100%;
                background-image: url(bg.jpg);
                background-size: auto 100%;
                background-position:10% center;
                background-repeat: no-repeat;
                /*滤镜效果;blur:模糊度(模糊程度);
                自己查滤镜效果有哪些*/
                filter: blur(10px);
            }
            main{
                /*定位*/
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                text-align: center;
            }
            header{
                margin-bottom: 5rem;
            }
            header span:nth-child(1){
                /*左浮动*/
                float: left;
                position: relative;
                top: 1rem;
                left: 1rem;
            }
            header span:nth-child(2){
                position: relative;
                top: 1rem;
            }
            header span:nth-child(3){
                /*右浮动*/
                float: right;
                position: relative;
                top: 1rem;
                right: 1rem;
            }
            #head{
                width: 15%;
                /*随着main的大小变化，但是有上限*/
                max-width: 200px;
                border-radius: 50%;
            }
            #account,#password{
                width: 70%;
                margin: 3rem auto;
                border-bottom: 2px solid lightgray;
                text-align: left;
                padding-bottom: 0.5rem;
                font-size: 1.2rem;
            }
            #password span:nth-child(2){
                /*调整密码圆点的字符间距
                letter：字母
                space：空间，间距*/
                letter-spacing: 0.3rem;
            }
            #login{
                width: 70%;
                line-height: 4rem;
                margin: 2rem auto;
                background-color: green;
                border-radius: 10px;
                font-size: 1.3rem;
            }
            footer img{
                width: 4rem;
            } 
 <section id="bg"></section>
        <main>
            <header>
                <span>返回</span>
                <span>登录</span>
                <span>注册</span>
            </header>
            <!--头像-->
            <img id="head" src="img.jpg" alt="头像">
            <!--账号-->
            <section id="account">
                <!--　中文空格-->
                <span>　账号　[e-mail]</span>
            </section>
            <!--密码-->
            <section id="password">
                <!--圆点;
                这些符号的编码可以从word办公软件中获取-->
                <span>　密码　</span>
                <span></span>
            </section>
            <!--登录-->
            <section id="login">登录</section>
            <!--忘记密码-->
            <section id="forget">忘记密码?</section>
            <!--第三方登录-->
            <footer>
                <img src="weibo.png" alt="采用微博登录">
                <img src="qq.png" alt="采用qq登录">
                <img src="weixin.png" alt="采用微信登录">
            </footer>
        </main>
    </body>