简介这是一份面向Web前端初学者与进阶练习者的实战素材围绕HTML、CSS与JavaScript三件套完整还原QQ登录窗口的视觉与交互效果帮助读者在模仿经典界面中巩固布局、样式与脚本联动能力。压缩包共11个文件包含6个png与2个gif图像素材、1个js脚本、1个css样式表和1个html页面整体约55KB体积轻巧便于直接解压运行与二次修改。其中图像资源用于还原企鹅图标、按钮与背景质感样式表负责字体、边框、过渡动画及响应式布局脚本则实现表单校验、模拟登录反馈、记住我、回车提交与自动聚焦等交互逻辑。目前已有860人学习下载适合希望用一个小项目串联前端基础知识点、积累界面还原经验的开发者参考。1. 从零复刻一个登录窗口为什么前端新手都该拆一遍这个模拟项目很多人学完 HTML 标签和 CSS 选择器之后会卡在一个尴尬的位置单个知识点都懂但给一个完整界面就不知道从哪下手。这个「htmlcssjavascript 模拟 QQ 登陆窗口效果」的项目恰好卡在这个痛点上——它不依赖任何框架不用 npm不用构建工具一个浏览器就能跑却把布局、样式、交互三件事串成了一条完整的链路。它适合刚学完三件套想找个练手项目的同学也适合想回头补一补原生 DOM 操作的熟手。整个项目围绕一个登录窗口展开头像区、账号输入框、密码输入框、登录按钮、记住密码勾选框以及点击登录后的简单校验反馈。麻雀虽小但一个真实登录界面该有的结构它都有拿来当第一个「能拿得出手」的练习作品比刷一百道选择题管用。2. 项目结构与技术选型三件套怎么分工才不打架2.1 目录结构三个文件各管一摊这个项目最舒服的地方就是结构干净没有花里胡哨的工程化配置。常见做法是拆成三个文件各司其职qq-login-demo/ ├── index.html # 结构层登录窗口的骨架 ├── style.css # 表现层窗口样式、布局、动效 └── script.js # 行为层输入校验、按钮交互有人喜欢把 CSS 和 JS 全塞进 HTML 里图省事。但只要你打算改样式或者加功能内联写法很快就会变成一团乱麻。我一般会强制自己拆开哪怕项目再小——因为拆开之后改颜色只动 CSS改逻辑只动 JS互不干扰这就是最朴素的分层思想。HTML 负责语义结构用form包住整个登录区输入框用input按钮用button勾选框用input typecheckbox。CSS 负责把默认丑丑的控件变成圆角、带阴影、有聚焦效果的登录框。JS 负责监听按钮点击读取输入框的值做非空判断和格式提示。2.2 技术选型为什么不用框架这个项目全程原生三件套不引入 jQuery更不碰 Vue 和 React。原因很直接登录窗口的交互复杂度极低无非是取值、判断、提示三步。用框架反而要配环境、装依赖、理解响应式原理学习成本远大于收益。从检索到的同类实现来看绝大多数版本都采用「绝对定位居中 固定宽高」的布局方案。窗口宽度一般设在 380px 到 420px 之间高度 300px 上下配合border-radius做圆角box-shadow做悬浮感。这种尺寸在桌面端看起来最接近真实登录框的比例。提示如果你打算把这个窗口嵌进已有页面记得把position: fixed改成position: relative否则它会脱离文档流盖住其他内容。2.3 核心结构代码HTML 骨架长什么样先看结构层。下面这段是登录窗口的 HTML 主体我加了注释说明每个区块的作用!-- 登录窗口容器负责整体定位和阴影 -- div classlogin-box !-- 顶部头像区用圆形裁剪 -- div classavatar img srcavatar.png alt用户头像 /div !-- 表单区包裹所有输入控件 -- form classlogin-form idloginForm !-- 账号输入框 -- div classinput-group input typetext idusername placeholder账号 autocompleteoff /div !-- 密码输入框 -- div classinput-group input typepassword idpassword placeholder密码 /div !-- 记住密码 登录按钮同一行 -- div classoptions labelinput typecheckbox idremember 记住密码/label button typebutton idloginBtn登 录/button /div /form !-- 错误提示区默认隐藏 -- p classtip idtip/p /div这段结构有几个细节值得说。autocompleteoff是为了防止浏览器自动填充账号模拟场景下更干净。登录按钮用typebutton而不是submit因为我们用 JS 手动接管点击不走表单默认提交避免页面刷新。错误提示p标签单独放在表单外面方便用绝对定位压在窗口底部。2.4 样式层让窗口「立起来」的关键几行CSS 部分的核心是定位和视觉层次。下面挑关键片段讲/* 窗口主体固定尺寸 居中 圆角阴影 */ .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 经典居中三件套 */ width: 400px; padding: 30px 40px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } /* 输入框去掉默认边框只留底部线 */ .input-group input { width: 100%; height: 42px; border: none; border-bottom: 1px solid #ddd; outline: none; font-size: 15px; transition: border-color 0.3s; } /* 聚焦时底部线变蓝给用户反馈 */ .input-group input:focus { border-bottom-color: #12b7f5; }transform: translate(-50%, -50%)配合top/left: 50%是让固定宽高元素居中的经典写法比 flex 更早普及兼容性也更好。输入框只保留底部边框是登录界面常见的设计语言视觉上更轻。transition让聚焦变色有个过渡不至于太生硬。这些细节单独看都不难但组合起来就是「像那么回事」和「一眼业余」的区别。3. 交互逻辑拆解点击登录后到底发生了什么3.1 事件绑定从按钮点击到函数执行JS 部分是这个项目的灵魂。没有它窗口只是个静态图片。核心逻辑围绕登录按钮的点击事件展开// 获取页面元素 const loginBtn document.getElementById(loginBtn); const username document.getElementById(username); const password document.getElementById(password); const tip document.getElementById(tip); // 绑定点击事件 loginBtn.addEventListener(click, function () { // 读取输入值并去掉首尾空格 const user username.value.trim(); const pass password.value.trim(); // 非空校验 if (!user) { showTip(请输入账号); return; } if (!pass) { showTip(请输入密码); return; } // 模拟登录成功 showTip(登录成功, success); }); // 提示信息统一处理函数 function showTip(msg, type) { tip.textContent msg; tip.className tip (type || error); }这段代码的逻辑链条很清晰先拿到 DOM 元素再绑定事件事件触发后依次做非空判断最后给反馈。trim()是为了防止用户输入一堆空格被当成有效内容。showTip抽成独立函数是为了让错误提示和成功提示走同一套逻辑改样式时只改一处。参数说明msg是要显示的文字type控制提示颜色默认走 error 红色传success时走绿色。这种小函数在项目变大后能省很多重复代码。3.2 输入框聚焦效果CSS 和 JS 的配合除了点击登录输入框的聚焦状态也值得处理。纯 CSS 的:focus能搞定变色但如果你想在聚焦时显示额外的提示文字就得靠 JS// 账号框聚焦时清空错误提示 username.addEventListener(focus, function () { tip.textContent ; }); // 密码框同理 password.addEventListener(focus, function () { tip.textContent ; });这个交互很小但体验差别很大。用户看到错误提示后重新点击输入框提示自动消失不用手动去关。这是真实登录界面的常见行为加上之后整个项目的完成度会明显提升。3.3 记住密码用 localStorage 做本地存储「记住密码」勾选框如果只是摆着好看那就浪费了。用localStorage可以做一个简单的本地记忆// 页面加载时读取上次记住的账号 window.addEventListener(load, function () { const saved localStorage.getItem(savedUser); if (saved) { username.value saved; document.getElementById(remember).checked true; } }); // 登录时根据勾选状态决定是否保存 const remember document.getElementById(remember); if (remember.checked) { localStorage.setItem(savedUser, user); } else { localStorage.removeItem(savedUser); }这里只存了账号没存密码。真实项目里密码绝不该明文存本地但作为练习你可以把密码也存进去感受一下流程只是心里要清楚这是反面教材。localStorage的数据不会随页面刷新丢失关掉浏览器再打开还在适合做这种轻量记忆。注意localStorage按域名隔离本地直接双击打开 HTML 文件时不同浏览器对file://协议下的存储行为不一致建议用本地服务器打开测试。4. 避坑与排查新手最容易翻车的五个地方4.1 点击按钮页面刷新了现象点登录按钮输入框内容瞬间清空提示也没了。 原因按钮写在form里且没指定type浏览器默认当成submit触发了表单提交导致页面刷新。 解决给按钮加typebutton或者在事件处理里调用event.preventDefault()。4.2 提示文字显示不出来现象JS 里明明设置了tip.textContent页面上却看不到。 原因提示元素的颜色和背景色一样或者被其他元素盖住了也可能是display: none没去掉。 解决检查.tip的color和z-index确保它没有被overflow: hidden的父容器裁掉。4.3 输入框聚焦时边框闪一下现象点击输入框底部线变色时整个框会轻微抖动。 原因outline: none去掉了默认轮廓但某些浏览器在聚焦时会加默认边框导致尺寸变化。 解决在input上显式写border: none和outline: none再用border-bottom单独控制底线。4.4 窗口在不同屏幕上位置偏移现象在自己电脑上居中换台显示器就偏了。 原因用了固定margin做居中没有用transform或 flex。 解决统一用top: 50%; left: 50%; transform: translate(-50%, -50%)或者给父容器加display: flex; justify-content: center; align-items: center。4.5 localStorage 存了但读不到现象明明setItem了刷新后getItem返回 null。 原因本地文件用file://打开时部分浏览器禁止本地存储或者存和读的 key 不一致。 解决用python -m http.server起个本地服务器通过http://localhost访问同时检查 key 拼写。5. 二次开发把这个登录窗口改成你自己的组件5.1 改造思路从「模拟」到「可复用」这个项目跑通之后最有价值的动作是把它改造成一个可复用的登录组件。具体做法是把 HTML 结构抽成一个模板函数CSS 用类名前缀隔离JS 暴露一个初始化方法接收配置参数。// 改造后的初始化函数接收配置对象 function initLogin(options) { const opts Object.assign({ container: #loginBox, // 挂载点 title: 账号登录, // 窗口标题 onSuccess: function () {} // 登录成功回调 }, options); const box document.querySelector(opts.container); // ... 动态渲染结构、绑定事件 // 校验通过后调用 opts.onSuccess(user) }这样改完之后同一个页面可以挂多个登录框或者把登录逻辑嵌进弹窗里。onSuccess回调是关键它把「登录成功后干什么」的决定权交还给调用方组件本身不关心后续跳转还是弹提示。5.2 验证方法三个必测场景改完之后别急着说完成至少跑这三个场景场景操作预期结果空账号提交不填账号直接点登录提示「请输入账号」不刷新空密码提交填账号不填密码提示「请输入密码」记住密码勾选后登录刷新页面账号自动填充勾选框保持选中这三个场景覆盖了校验、反馈、存储三条链路跑通基本就没大问题。5.3 一个具体技巧用 CSS 变量统一换肤如果你想让登录窗口支持换主题色别去改每一处颜色值用 CSS 变量:root { --primary: #12b7f5; /* 主色改这一处全局生效 */ --radius: 12px; } .input-group input:focus { border-bottom-color: var(--primary); } .login-box { border-radius: var(--radius); }以后想换配色只改:root里的变量就行。这个习惯我从写第一个登录页开始就强制自己用后来做任何界面都先定义变量省了无数次全局搜索替换的麻烦。5.4 我踩过的坑最早写这个项目时我把所有 JS 都写在window.onload外面结果脚本执行时 DOM 还没渲染完getElementById全部返回 null控制台一片红。后来养成了习惯要么把script标签放在body末尾要么用DOMContentLoaded包起来。从那以后我每次写原生 JS 都强制走一遍「先确认元素拿到没有」的检查再往下写逻辑。希望这个习惯也能帮到你。本文还有配套的精品资源点击获取
