用纯HTML和CSS仿写知乎登录页面

这是知乎的官方的登录页面

这是我的登录页面，使用 HTML + CSS 进行编写。我觉得这是一个供前端新手练手的一个不错的小项目， 在这个系列，我将会用 HTML + CSS 编写各大知名网站的登录界面，欢迎大家交流探讨。

源码展示:

body{
    background-color: #B8E5F8;
    background-image: url("./static/images/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    margin: 0; 
    display: flex;
    flex-direction: column;
    height: 100vh; 
    overflow: auto;
    width: 100%; 
}

.login-container{
    align-items: center;
    border-radius: 2px;
    display: flex;
    flex: 1 1; 
    flex-direction: column;
    height: calc(100% - 42px);
    min-height: 688px;
    justify-content: center;    
}

.login-logo{
    width: 128px;
    height: 81px;
    margin-bottom: 24px; 
}


.login-form{
    background-color: #fff;
    display: flex;
    margin-bottom: 120px;
}

.login-left-container{
    width: 332px; 
    text-align: center;
    border-right: 1px solid whitesmoke;
}

.login-left-container-text{
    padding-top: 98px;
}

.qrcode-content{
    padding-bottom: 40px;
}

.login-app-title{
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    color: #373a40;
}

.login-scan{
    margin-top: 8px; 
    margin-bottom: 24px; 
    color: #373a40; 
    font-size: 14px;
    line-height: 20px; 

}

.login-qrcode{
    border: 1px solid #ebeced; 
    border-radius:  6px;
    padding: 8px;
    height: 120px; 
    width: 120px;
    margin: 0 auto;
}


.other-scans{
    box-sizing: border-box;
    margin-top: 24px; 
    color: #373a40; 
    font-size: 14px; 
    font-weight: 600;
    line-height: 20px;  
}


.login-options {
    display: flex;
    margin: 26px 0 22px;
    gap: 8px; 
    justify-content: center;
}

.login-option-btn {
    padding: 4px 10px;
    border: 1px solid #e4e6eb;
    border-radius: 29px;
    background: #FFFFFF;
    color: #1a1a1a;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
}

.login-option-btn:hover {
    background: #F8F8FA;
    border-color: #F8F8FA;
    color: #1a1a1a;
}

.login-right-container{
    width:343px;  
    padding: 0 24px 23px;
}

.login-tabs {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px; 
    text-align: left;
    margin-bottom: 24px;
    font-size: 18px;
    color: #444;
    height: 48px;
}

.login-tab {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 49px;
    line-height: 46px;
    margin-right: 24px; 
}


.login-tab.active {
    border-bottom: 4px solid #1772F6;
    background: #fff;
    font-weight: 600; 
}

.login-phone-row, .login-sms-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 6px; 
    border-bottom: 1px solid #ebeced;
}

.country-code {
    width: 100px;
    border: none;
    background: none;
    font-size: 15px;
    padding-left: 8px;
    color: #8491A5;
}

.account-seperator{
    background: #ebeced;
    height: 22px;
    margin: 0 12px; 
    width: 0.5px; 
}

.phone-input {
    border: none;
    font-size: 15px; 
    color: #8491A5;
}

.phone-input:focus {
    outline: none;
}

.sms-input {
    border: none; 
    font-size: 15px; 
    color: #8491A5;
    outline: none;
}

.get-sms-btn {
    height: 36px;
    margin-left: auto; 
    padding: 0 0 0 12px;
    background: transparent;
    border: none; 
    color: #318ef7;
    cursor: pointer;
    font-size: 14px; 
} 


.login-register-button{
    margin-top: 30px;  
    width: 100%;
}

.login-register-button button{
    background: #1772F6;
    border-radius: 3px;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
}


.other-login-methods{
    display: flex;
    margin: 0 24px 12px; 
    align-items: center;
    margin-top: 30px;
}

.other-login-line{
    border-top: 1px solid;
    border-color: #ebeced;
    width: 110px;
}

.other-login-font{
    color:#9196a1; 
    font-size: 12px;
    margin-left: 16px;
    margin-right: 16px;
    width: 72px; 
    white-space: nowrap;
}

.social-login{
    margin: 12px 98px; 
    height: 60px;
    display: flex;
    justify-content: center;
}

.social-button-group{
    width: 180px; 
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-button-group button {
    width: 24px;
    height: 24px;
    border: none; 
    border-radius: 50%;
}

.login-agreement{
    width: 90%; 
    color: #9196a1; 
    font-size: 12px; 
    padding: 12px 24px 30px;
    
    text-wrap: wrap;
}

.login-footer div {
    text-align: center;
}

.login-footer div a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
}

.login-footer div span {
    color: #fff;
    font-size: 12px; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎 - 有问题，就会有答案</title>
    <link rel="stylesheet" href="./login.css">
</head>
<body>
    <div class="login-container">
        <img src="./static/images/zhihu.png" alt="知乎 LOGO" class="login-logo">
        <div class="login-form">
            <div class="login-left-container">
                <div class="qrcode-content">
                    <div class="login-left-container-text">
                    <div class="login-app-title">打开知乎App</div>
                        <div class="login-scan">在「我的页」右上角打开扫一扫</div>

                        <div class="login-qrcode">
                            <img src="./static/images/qrcode.png" alt="二维码" 
                            style="height: 120px; width: 120px;">
                        </div>  
                    </div>
                    <div class="other-scans">
                        <div>其他登录方式: 微信</div>
                    </div>
                </div>
                
                <div class="login-options">
                    <button class="login-option-btn">下载知乎App</button>
                    <button class="login-option-btn">开启机构号</button>
                    <button class="login-option-btn">无障碍模式</button>
                </div>
            </div>


            <div class="login-right-container" >
                <div class="login-tabs">
                    <div class="login-tab active">验证码登录</div>
                    <div class="login-tab">密码登录</div>
                </div>
                <div class="login-phone-row">
                    <select class="country-code">
                        <option value="+86">中国 +86</option>
                    </select>
                    <input class="phone-input" type="text" placeholder="请输入手机号">
                </div>
                 <div class="login-sms-row">
                    <input class="sms-input" type="text" placeholder="输入 6 位短信验证码">
                    <button class="get-sms-btn">获取短信验证码</button>
                </div>

                <div style="text-align: right; font-size: 14px;">
                    获取语言验证码
                </div>
                <div type="submit" class="login-register-button">
                    <button>登录/注册</button>
                </div>

                 <div class="other-login-methods">
                    <div class="other-login-line"></div>
                    <div class="other-login-font">其它方式登录</div>
                    <div class="other-login-line"></div>
                </div>

                <div class="social-login">
                    <div class="social-button-group">
                        <button type="button"></button>
                        <button type="button"></button>
                        <button type="button"></button> 
                    </div>
                </div>

                 <div class="login-agreement">
                    <span>未注册手机验证后自动登录，注册即代表同意《知乎协议》《隐私保护指引》</span>
                </div> 
            </div> 
        </div>

        <footer class="login-footer">
            <div>
                <a href="#">知乎专栏</a>
                <a href="#">圆桌</a>
                <a href="#">发现</a>
                <a href="#">联系我们</a>
                <a href="#">来知乎工作</a>
                <a href="#">注册机构号</a>
                <a href="#">Investor Relations</a>
              </div>
              <div>
                <a href="#">侵权举报</a>
                <a href="#">网上有害信息举报专区</a>
                <a href="#">儿童色情信息举报专区</a>
              </div> 
              <div>
                <span>互联网算法推荐举报专区</span>
                <span>违法和不良信息举报：010-82716601</span>
              </div>
        </footer>
    </div>
</body>
</html>