用纯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>