css3 注册页面

 不多说，先展示下注册页面

 

• 样式代码

 <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family:'Microsoft JhengHei', '微软雅黑', STXihei;
            background: #344a72;
            color: #fff;
            line-height: 1.8;  /**设置行高**/

        }

        a {
            text-decoration: none;   /**去掉a标签下划线**/
        }

        #container {
            max-width: 800px; /**设置最大宽度**/
            margin: 30px auto; /**设置margin 30px上下，auto居中**/
            padding: 30px;

        }


        .form-wrap {
            background: #fff;
            color: #333;
            padding: 15px 25px;

        }

        .form-wrap h1, .form-wrap p {
            text-align: center; /**设置文本居中**/
        }

        .form-wrap  .form-group {
            margin-top: 15px;
        }

        .form-wrap .form-group label {
            display: block; /**快标签变成行标签**/
            color: #666;
        }

        .form-wrap .form-group input {
            width: 100%;
            padding: 10px;
            border: #ddd 1px solid;
            border-radius: 5px;

        }


        .form-wrap button {
            display: block; /**行标签变为块标签**/
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            background: #49c1a2;
            color: #fff;
            cursor: pointer;


        }

        .form-wrap button:hover {
            background: #37a08e;
        }


        .form-wrap .bottom-text {
            font-size: 13px ;
            margin-top: 20px;
        }


        footer {
            text-align: center;
            margin-top: 10px;

        }

        footer a {
            color: #49c1a2;
        }

    </style>

• html代码

<div id="container">
    <div class="form-wrap">
        <h1>注册</h1>
        <p>欢迎加入China全栈测试开发总部群：894912752</p>
        <form>
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" name="ame" id="name" />
            </div>
            <div class="form-group">
                <label for="sex">性别</label>
                <input type="text" name="sex" id="sex" />
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" name="email" id="email" />
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" />
            </div>
            <div class="form-group">
                <label for="password2">确认密码 </label>
                <input type="password" name="pasword2" id="password2" />
            </div>
            <button type="submit" class="btn">注册</button>
            <p class="bottom-text">
                当你注册该网站时,保证你所填写的信息
                <a href="#">每一个 & 信息</a>完整
                <a href="#">我们保证不会透露您的信息</a>
            </p>
        </form>
    </div>
    <footer>
        <p>已经有账户了? <a href="#">这里登录</a></p>
    </footer>
</div>