用纯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>
相关文章：
用纯HTML和CSS仿写知乎登录页面
这是知乎的官方的登录页面 这是我的登录页面，使用 HTML CSS 进行编写。我觉得这是一个供前端新手练手的一个不错的小项目， 在这个系列，我将会用 HTML CSS 编写各大知名网站的登录界面，欢迎大家交流探讨。 源码展示: body{ba…...
数据库故障排查全攻略：从实战案例到体系化解决方案
一、引言：数据库故障为何是技术人必须攻克的 "心腹大患" 在数字化时代，数据库作为企业核心数据资产的载体，其稳定性直接决定业务连续性。据 Gartner 统计，企业每小时数据库 downtime 平均损失高达 56 万美元࿰…...
MySQL如何优雅的执行DDL
一、概述 在MySQL中，DDL（数据定义语言）语句用于定义和管理数据库结构，包括创建、修改和删除数据库对象（如表、索引等）。执行DDL操作时，需要谨慎处理，以避免对生产环境的稳定性和性能…...
Django异步任务处理方式总结
在 Django 中实现异步任务处理是优化性能和用户体验的关键。以下是几种常见的异步任务处理方式及详细说明： 1. Celery（最主流方案） 适用场景：需要可靠、分布式、复杂任务队列的项目（如定时任务、重试机制、多节点部署…...
类加载机制详解：双亲委派模型与打破它的方式
在复杂的 Java 系统中，类加载是最基础却常被忽略的一环。理解 JVM 的类加载机制，特别是 双亲委派模型（Parent Delegation Model），是我们深入掌握热部署、插件机制、ClassLoader 隔离、ClassNotFound 错误等问题的关键。…...
【Redis】C++如何使用redis
文章目录 1. redis客户端2. 使用通用命令3. 使用string命令3. 使用list命令4. 使用set命令5. 使用hash命令6. 使用zset命令 1. redis客户端 在前面的学习种，我们都是使用redis命令行客户端手动执行操作的；但是更多的时候，需要使用redis的api…...
解决方案)
2025年现代职业教育质量提升计划(植保无人机实训室)解决方案
一、项目背景 1.1 现代职业教育发展趋势 现代职业教育正朝着多元化、技术化、智能化方向发展，以满足社会对高素质技术技能人才的迫切需求。随着科技的飞速进步，职业教育课程体系不断优化，实训教学环节的重要性愈发凸显。据教育部统计&#…...
考研系列-408真题计算机组成原理篇（2010-2014）
写在前面 此文章是本人在备考过程中408真题计算机组成原理部分（2010年-2014年）的易错题及相应的知识点整理，后期复习也常常用到，对于知识提炼归纳理解起到了很大的作用，分享出来希望帮助到大家~ # 2010年 1.DRAM芯片的排列和编址方式 这个区别于多体交叉编址：这个可以理…...
【BUG】‘DetDataSample‘ object has no attribute ‘_gt_sem_seg‘
问题： 使用mmdetection框架使用COCO格式训练自定义数据集时，其中模型使用HTC模型时出现如下问题： AttributeError: ‘DetDataSample’ object has no attribute ‘_gt_sem_seg’. Did you mean: ‘gt_sem_seg’? results self(**data, mode…...
47.电压跌落与瞬时中断干扰的防护改善措施
电压跌落与瞬时中断干扰的防护改善措施 1. 电压跌落与瞬时中断的影响机理2. 解决措施 1. 电压跌落与瞬时中断的影响机理 跌落发生的常见场景如下： （1）电源插头接触不良，瞬态中断即刻恢复； （2）电…...
极狐Gitlab 里程碑功能介绍
极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 里程碑 (BASIC ALL) 极狐GitLab 中的里程碑是一种跟踪议题和合并请求的方法，这些请求是为了在特定时间段内实现更…...
一次Android Fragment内存泄露的bug解决记录｜Fragment not attach to an Activity
Bug描述 前些天出现了一个 bug。Activity 页面里放了一个 ViewPager2，其中的每一页是一个 Fragment。其中第一页的 Fragment 实现了一个监听器，当事件发生和首次添加到监听器管理者 listener manager 时，manager 会通知所有监听者࿰…...
基于深度学习的交通标志识别系统
基于深度学习的交通标志识别系统 项目简介 本项目实现了一个基于深度学习的交通标志识别系统，使用卷积神经网络(CNN)对交通标志图像进行分类识别。系统包含数据预处理、模型训练与评估、结果可视化和用户交互界面等模块。 数据集 项目使用德国交通标志识别基准数…...
LVGL图像导入和解码
LVGL版本：8.1 概述 在LVGL中，可以导入多种不同类型的图像： 经转换器生成的C语言数组，适用于页面中不常改变的固定图像。存储系统中的外部图像，比较灵活，可以通过插卡或从网络中获取，但需要配置…...
Vite Proxy配置详解：从入门到实战应用
Vite Proxy配置详解：从入门到实战应用 一、什么是Proxy代理？ Proxy（代理）是开发中常用的解决跨域问题的方案。Vite内置了基于http-proxy的代理功能，可以轻松配置API请求转发。 二、基础配置 在vite.config.js中配置…...
oracle goldengate非并行进程转换为并行进程
oracle goldengate非并行进程转换为并行进程 在上一期的文章中写道了直接创建并行进程的方式对大事务进行分解，这对于新建立同步进程的时候提前规划是很有帮助的，但是如果对已经进行了同步的进程重新建立需要耗时比较长，Oracle提供了非并行进…...
VBA将PDF文档内容逐行写入Excel
VBA是无法直接读取PDF文档的，但结合上期我给大家介绍了PDF转换工具xpdf-tools-4.05，先利用它将PDF文档转换为TXT文档，然后再将TXT的内容写入Excel，这样就间接实现了将PDF文档的内容导入Excel的操作。下面的代码将向大家演示如何实…...
project从入门到精通（五）
目录 创建资源的基本信息 在project中创建资源工作表 编辑信息详解 最大单位 标准费率与加班费率 每次使用成本 成本累算 基准日历 三类资源工作表的总结——不同的资源必须要设置的属性 除了资源名称是必须设置的之外，剩余的资源的可设置选项如下图所…...
第3.2.3节 Android动态调用链路的获取
3.2.3 Android App动态调用链路 在Android应用中，动态调用链路指的是应用在运行时的调用路径。这通常涉及到方法调用的顺序和调用关系，特别是在应用的复杂逻辑中，理解这些调用链路对于调试和性能优化非常重要。 1，动态调用链路获…...
亿级流量系统架构设计与实战（六）
微服务架构与网络调用 当某个业务从单体服务架构转变为微服务架构后，多个服务之间会通过网络调用形式形成错综复杂的依赖关系。 在微服务架构中 ， 一个微服务正常工作依赖它与其他微服务之间的多级网络调用。 网络是脆弱的 ， RPC 请求有较大的概率会遇到超时 、 抖动 、 断…...
浅聊find_package命令的搜索模式(Search Modes)
背景 find_package应该算是我们使用最多的cmake命令了。但是它是如何找到上游库的.cmake文件的？ 根据官方文档，整理下find_package涉及到的搜索模式。 搜索模式 find_package涉及到的搜索模式有两种：模块模式(Module mode)和配置模式(Conf…...
开发搭载OneNet平台的物联网数据收发APP的设计与实现
一、开发环境与工具准备 工具安装 下载HBuilderX开发版（推荐使用开发版以避免插件兼容性问题）安装Node.js和npm（用于依赖管理及打包）配置Android Studio（本地打包需集成离线SDK）项目初始化 创建uni-app项目，选择“默认模板”或“空白模板”安装必要的UI库（如uView或Van…...
【LLaMA-Factory】使用LoRa微调训练DeepSeek-R1-Distill-Qwen-7B
【LLaMA-Factory】使用LoRa微调训练DeepSeek-R1-Distill-Qwen-7B 本地环境说明禁用开源驱动nouveau安装nvidia-smi安装Git环境安装Anaconda(conda)环境下载DeepSeek-R1-Distill-Qwen-7B模型安装LLaMA-Factory下载LLaMA-Factory安装LLaMA-Factory依赖修改环境变量安装deepspeedA…...
sh脚本多卡顺序执行训练文件
常规的单机多卡训练脚本一般为 python -m torch.distributed.run --nproc_per_node 2 train.py 上述脚本采用 2 张显卡训练 采用sh脚本，单次顺序执行多个多卡训练文件 例如 train1.py train2.py 特点：在执行完 train1.py之后再执行train2.py文件 …...
使用lldb查看Rust不同类型的结构
目录 前言 正文 标量类型 复合类型——元组 复合类型——数组 函数 &str struct 可变数组vec Iter String Box Rc Arc RefCell Mutex RwLock Channel 总结 前言 笔者发现这个lldb挺好玩的，可以查看不同类型的结构，虽然这好像是C的东…...
【Linux】线程POSIX信号量
目录 1. 整体学习思维导图 2. 信号量的概念 3. 基本接口 4. 基于环形队列的生产者消费者模型(信号量) 1. 整体学习思维导图 2. 信号量的概念 POSIX信号量和SystemV信号量作用相同，都是用于同步操作，达到无冲突的访问共享资源目的。但 POSIX可以用于线…...
WPF中如何自定义控件
WPF自定义控件简化版：账户菜单按钮（AccountButton） 我们以**“账户菜单按钮”为例，用更清晰的架构实现一个支持标题显示、渐变背景、选中状态高亮**的自定义控件。以下是分步拆解： 一、控件核心功能 我们要做一个类似…...
大模型MCP更高效的通信：StreamableHTTP协议
随着大语言模型（LLMs）的飞速发展，模型与应用之间的通信效率和灵活性变得至关重要。Model Context Protocol (MCP) 作为专为模型交互设计的协议，一直在不断进化以满足日益增长的需求。近期，MCP引入了一个令人振奋的新特…...
防火墙在网络安全体系中的核心作用与原理
防火墙在网络安全体系中的核心作用与原理 一、核心作用解析 1. 访问控制中枢 功能维度实现方式典型场景黑白名单控制基于IP/端口/协议的规则过滤限制外部IP访问财务系统，仅开放VPN端口权限分级用户组策略映射（如AD集成）禁止普通员工访问核心…...
MySQL事务和JDBC中的事务操作
一、什么是事务 事务是数据库操作的最小逻辑单元，具有"全有或全无"的特性。以银行转账为例： 典型场景： 从A账户扣除1000元 向B账户增加1000元 这两个操作必须作为一个整体执行，要么全部成功，要么全部失败…...