SOURCE

<div class="content">
    <div class="login">
        <div class="logo"></div>
        <ul class="g_list">
            <li>
                <input placeholder="QQ号码/手机/邮箱" />
            </li>
            <li>
                <input placeholder="请输入你的QQ密码" type="password" />
            </li>
        </ul>
        <form id="auto_login">
            <input type="checkbox" id="remember" />
            <label for="remember"">记住登录状态</label>
        </form>
        <button id="go">登录</button>
        <div id="swicth"">
            <a id="forgetpwd">忘了密码？</a>
            <a id="zs">注册新账号</a>
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

ul {
    padding: 0;
}

.content {
    margin: 0 auto;
    width: 320px;
    height: 500px;
}

.login {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: 30px;
}

.logo {
    width: 244px;
    height: 100px;
    background-image: url(http://mail.qq.com/zh_CN/htmledition/images/logo/qqmail/qqmail_logo_default_200h.png);
    background-size: 244px 100px;
}

.g_list {
    width: 100%;
}

.g_list li {
    list-style: none;
}

.g_list li input,
button,
#auto_login,
#swicth {
    width: 100%;
}

#go {
    margin: 0;
}

#auto_login {
    float: left;
}

#forgetpwd {
    float: left;
}

#zs {
    float: right;
}