简介基于HTML与CSS实现的学信网学籍学历查询页面模拟源码面向正在学习前端布局、页面还原与响应式设计的开发者。页面仿照学信网移动端查询界面所有学籍、学历、学校、时间等信息均可直接编辑弥补了原页面以图片形式呈现、无法修改内容的问题在电脑端访问时需通过F12开发者工具切换为手机视图体现移动端优先的适配思路。资源压缩包共3个文件含1个HTML页面、1个InsCode配置及1个.gitignore整体仅5KB结构精简便于快速阅读和二次修改。作者已计划后续推出完整的学信网手机端模拟项目可作为跟进前端进阶实践的线索同时需注意该模拟页面仅为学习交流用途不具官方认证功能。目前已有209人学习适合希望掌握页面结构还原、响应式适配和表单布局的入门至中级开发者参考。1. 一个学信网查询页面的前端模拟练手价值与适用边界很多前端新手学完 HTML 和 CSS 之后会卡在同一个地方标签和属性都认识但不知道拿什么练手。仿一个每天都用的信息型页面是成本最低的路径。学信网查询页面恰好是典型的信息型布局——导航、表单卡片、结果反馈、页脚结构清晰不需要复杂框架特别适合练布局。这份资源就是一个纯 HTML/CSS 的模拟页面不接后端、不查真实数据表单输入只在前端本地做展示用。适合刚学完基础的前端初学者也适合想在作品集里放一个“看起来正经”的静态页的人。边界要先说清楚它是学习用的页面模拟不是官方查询系统不能用于任何冒充官方、诱导输入个人信息的场景这一点比代码本身更重要。2. 拆解查询页的信息架构从上到下的区块划分与选型理由任何仿站第一件事都不是写样式而是先把页面的信息架构建出来。学信网查询页看起来只有一屏但拆开会发现它由四个区块构成顶部导航、主查询卡片、结果提示区、页脚。这个顺序是有讲究的——用户的第一诉求永远是“找到查询入口”所以导航之后马上就是表单而不是插大段说明文字。下面按区块逐个说清楚结构怎么定、为什么这么定。2.1 页头导航与身份标识区固定信息如何做布局页头是整张页面上最稳定的区域它承担的是身份识别与路径引导。做模拟页面时我一般会把导航条设计成左侧是站点名称右侧是“登录/注册”入口。这里有一个容易被新手忽略的点导航里的链接在模拟页面里并不真的存在但要保证 href 指向合理的位置比如#或者一个页面内的锚点不能留成空字符串否则点击时会刷新页面体验很割裂。!-- 顶部导航左侧 logo右侧导航链接 -- header classsite-header div classheader-inner a classlogo href#学信网模拟/a nav classnav-links a href#query-card学籍查询/a a href#query-card学历查询/a a href#登录/a a href#注册/a /nav /div /header这个结构中.header-inner负责限制内部宽度常见做法是给一个max-width配合左右auto居中。logo 用文字而不是图片省掉图片资源的同时也让页面在无网络环境下能完整展示。nav 里的链接排列建议默认用 flex给.nav-links a加上合适的padding来扩大点击区域——移动端手指点击目标建议不小于 44×44 像素这个数字在很多交互规范里都出现过模拟页面虽然不涉及真实埋点但养成这个习惯对后续做正式项目有好处。如果你打开原页面会发现它并没有特别复杂的视觉装饰这说明信息型页面的选型原则是克制的不要为了像而堆元素。接下来要处理的是页面主区域的背景色。学信网这类官方查询页面通常会用一个浅色背景衬托白色卡片形成“卡片浮在页面上”的视觉这个手法在各类后台系统中也通用。我先给 body 设置浅灰偏蓝的背景再让卡片用纯白背景加圆角阴影。这里阴影不要用过度夸张的数值1~2px 的偏移加 8~16px 的模糊就够了过重的阴影会让页面显得像个人作品而不是一个靠谱的查询入口。2.2 查询表单区输入框、下拉框与查询按钮的组合逻辑表单区是这张页面的核心用户停下来就是为了在这里输入信息。模拟页面的表单要覆盖三类控件文本输入框、下拉选择框、按钮。真实查询场景里通常有姓名、证件号码、验证码等字段而学历查询还会有一个“学历类别”之类的小下拉框。我在设计时把它们集中放在一张白卡里按阅读顺序纵向排列。!-- 查询表单核心区姓名、类别、证件号、验证码、查询按钮 -- main classpage-main section classquery-card idquery-card h1学籍学历查询/h1 form idquery-form novalidate div classform-group label forname姓名/label input typetext idname namename placeholder请输入姓名 autocompleteoff /div div classform-group label fordegree查询类别/label select iddegree namedegree option valuexueli学历查询/option option valuexueji学籍查询/option /select /div div classform-group label forcert_no证件号码/label input typetext idcert_no namecert_no placeholder请输入证件号码 autocompleteoff /div div classform-group form-group-captcha label forcaptcha验证码/label div classcaptcha-row input typetext idcaptcha namecaptcha placeholder不区分大小写 span classcaptcha-codeXK8Z/span /div /div button typesubmit classbtn-submit查 询/button /form /section /main这里有两个点在代码里很重要。第一个是 form 上的novalidate属性——我故意关掉浏览器的原生校验因为模拟页面要演示的是自定义校验逻辑而且原生校验的弹窗样式和学信网并不一致会让页面观感穿帮。第二个是 label 的for属性和 input 的id必须一一对应这样做的好处是点击文字也能聚焦输入框键盘导航时屏幕阅读器也能读出“这个输入框对应哪个标签”这是可访问性里最常见也最便宜的一个改进。select 下拉框保留了一个“查询类别”因为真实学信网在学历查询时确实需要区分学籍和学历加上它能让表单的完整度更高。如果你的资源包里的代码和我描述的不完全一样别急着改先理解这类控件组合的意图文本输入负责“身份信息”下拉框负责“查询范围”验证码负责“模拟验证环节”按钮是唯一动作出口。这样一个组合放在任何信息型页面里都成立。2.3 结果提示区与页脚常用状态的设计方式查询表单下方要预留一块结果提示区这是很多人做仿站时会漏掉的部分。真实页面的查询按钮按下去之后至少要经过“查询中”和“查询结果”两个状态模拟页面如果不做这块用户点完按钮发现什么都没发生整个页面的可信度就塌了一半。我习惯把它做成一个隐藏的区块默认.result-box设置display:none后续通过 JavaScript 往里填充内容再显示出来。!-- 结果提示区默认隐藏由脚本控制显示 -- div classresult-box idresult-box hidden p classresult-title查询结果/p p classresult-message idresult-message/p /divhidden属性是 HTML5 自带的隐藏机制显式地告诉浏览器“这个元素当前不参与渲染”比用 class 控制 display 更直观。真正显示的时候会通过 JavaScript 移除 hidden这样即使 JS 文件加载失败这个区域也不会占位避免了布局上出现一条莫名其妙的空白带。页脚的部分反而要简单。信息型页面的页脚通常只有版权声明、备案信息和相关链接模拟页面里不需要写真实的备案号也不要复制真实学信网的版权信息写“仅供前端学习使用”就足够了。我在实际实现时会给 footer 一个和页头呼应的浅背景内容居中排列内部用一个小竖线分隔几个链接。这里有一个合规层面的细节链接的目标地址不能指向真实学信网域名否则很容易让浏览者误以为这是官方页面的一部分这一点在第 5 章会专门展开。3. 把样式写细卡片化、间距、对齐与响应式单位结构定了之后样式决定这个页面是“像样”还是“一眼假”。很多新手做仿站时喜欢猜参数边调边拖最后做出一个看起来差不多的页面但仔细看间距、字号、圆角全都在“仿”和“真”之间摇摆。我的做法是先定一套基础规范再让页面上所有尺寸都从规范里长出来。3.1 重置样式与全局变量从零开始写字面样式的基础动手写样式第一步是重置浏览器默认样式。不同浏览器的默认边距、字号、边框并不一致比如某些浏览器会给 body 默认 8px 的外边距如果不重置页面就会整体偏离设计预期。下面这个重置块是业内最常见的升级版 reset它把盒模型改成 border-box并去掉默认的边距/* 重置默认边距与盒模型 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 全局变量统一管理颜色、圆角、间距 */ :root { --bg-body: #f0f3f5; --card-bg: #ffffff; --text-primary: #1f2d3d; --text-secondary: #5e6d82; --line-base: #dcdfe6; --btn-primary: #1e6fff; --btn-hover: #0053d5; --radius-card: 8px; --space-md: 24px; }为什么用 CSS 变量原因很实际页面上的主题色、状态色、圆角、间距会被反复引用特别是在 form-group、按钮、提示框里。我见过有人把同一个蓝色值写成#1e6fff、#1f6ffd、#1e70ff三个版本排查时根本分不清谁对谁错。变量把这些值收拢到:root统一管理后面所有样式都只引用变量名改主题色时只改一处整体就跟着变了。box-sizing: border-box的作用是让 padding 和 border 不再撑大元素宽度写自适应布局时能少掉一半的意外。body 上的基础排版也需要在这里处理。字号我习惯用 14px 作为信息型页面的基准因为这类页面信息密度高16px 的正文对长段文字友好但用在查询表单里会让控件显得臃肿。行高设为 1.6字体栈用PingFang SC, Microsoft YaHei, sans-serif中文页面优先使用系统中文字体不要引入 web font加载成本高且模拟页面不需要。3.2 让表单控件在各浏览器下表现一致表单控件的样式是仿站里最容易“一眼假”的地方。真实页面的输入框通常只有一根下边框或者一个淡灰色边框焦点时会变成主题色。浏览器默认的 input 样式各不相同Safari 会带内阴影Chrome 会带聚焦描边不改就很难统一。我一般会对所有输入类控件做一次统一样式/* 文本输入框与下拉框统一宽度、高度、边框 */ input[typetext], select { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; color: var(--text-primary); background-color: #fff; border: 1px solid var(--line-base); border-radius: 4px; outline: none; transition: border-color 0.2s ease; } input[typetext]:focus, select:focus { border-color: var(--btn-primary); } input[typetext]::placeholder { color: #a8abb2; } /* 去掉默认下拉箭头用内联 SVG 箭头代替 */ select { appearance: none; background-image: url(data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg width12 height8 viewBox0 0 12 8%3E%3Cpath dM1 1l5 5 5-5 stroke%235e6d82 stroke-width1.5 fillnone stroke-linecapround/%3E%3C/svg%3E); background-repeat: no-repeat; background-position: right 12px center; }从实用角度讲这里三个细节最容易翻车。第一个是outline: none它的作用是去掉焦点时浏览器自动加的描边但纯去掉会让键盘用户找不到焦点所以必须用border-color的变化补上焦点状态这才是一个合格的焦点处理。第二个是 placeholder 的样式默认 placeholder 是灰色但如果你不设置部分浏览器会用半透明黑在白色背景上看起来脏脏的。第三个是 select 的appearance: none它去掉浏览器默认下拉箭头后必须自己用背景图放一个箭头我在这里用的是内联 SVG 的 data URI好处是不发额外请求坏处是 URI 里包含特殊字符需要转义。如果你不想处理转义也可以直接切一张单色箭头 PNG 放本地。按钮样式也要在这一阶段定。查询按钮是整张卡片里唯一的视觉强调点我把它的宽度设为整个表单宽度这样视觉引导上最明确——用户不会犹豫“我还能点什么”。高度和输入框保持一致都是 40px不能用 padding 估摸因为按钮和输入框并排时高度差会让表单看起来是歪的。3.3 用媒体查询处理窄屏手机上的查询体验严格说学信网查询页是面向桌面的老牌页面但用户用手机访问很常见所以模拟页面至少要保证窄屏下不横向溢出。我选择把断点设在 768px大于等于这个宽度是默认桌面布局小于这个宽度时页头导航折叠、卡片边距收窄、字号微调。/* 窄屏断点导航改竖排卡片贴边验证码行改纵向 */ media (max-width: 768px) { .header-inner { flex-direction: column; gap: 8px; padding: 12px 16px; } .nav-links a { padding: 8px 10px; } .query-card { margin: 16px 12px; padding: 20px 16px; border-radius: 6px; } .captcha-row { flex-direction: column; align-items: stretch; } }媒体查询的要点是只覆盖“确实需要变化”的属性而不是把整个页面重写一遍。我见过有人写窄屏样式时把每个选择器都复制一遍结果桌面样式稍作修改手机端就会漏改。正确的姿势是桌面端负责 90% 的通用样式媒体查询里只做三件事改宽度、改间距、改排列方式。比如导航从横排变成竖排卡片的外边距从居中变成两侧留白。响应式再往下延伸我要提一个视觉单位上的建议这个项目里尽量别用vw、vh做字号和间距。原因很简单vw是视口宽度单位在窄屏上会自动缩小但查询表单的输入框是有最小触控尺寸要求的缩到 12px 字号会让移动端用户很难操作。固定使用 px 配合少量媒体查询是这个场景下最稳的选择。如果你的设备尺寸特殊比如平板可以在 768px 和 1024px 之间再补一个断点但我不建议一开始就做三套断点先把一窄一宽两套跑通再用开发者工具逐档检查。4. 从静态页到可交互模拟校验、提示与简单脚本增强HTML 和 CSS 负责“长这样”但查询按钮按下去之后页面毫无反应体验是不完整的。模拟页面允许用一点点 JavaScript 让用户行为闭环。这里的原则是能不用框架就不用框架能不发请求就不发请求因为资源定位是前端静态模拟不是完整业务系统。4.1 用原生 JS 做空值校验与输入格式检查表单提交的第一道防线是校验。真实学信网会校验姓名、证件号码的格式模拟页面不需要那么严格但至少要做空值校验和证件号长度校验。我用原生addEventListener绑定了 submit 事件并在提交前阻止默认跳转这样表单永远不会发出真实请求。// 获取表单与关键输入框 const form document.getElementById(query-form); const nameInput document.getElementById(name); const certNoInput document.getElementById(cert_no); // 监听 submit拦截默认表单提交行为 form.addEventListener(submit, function(event) { event.preventDefault(); const name nameInput.value.trim(); const certNo certNoInput.value.trim(); if (!name) { alert(请输入姓名); nameInput.focus(); return; } if (!certNo) { alert(请输入证件号码); certNoInput.focus(); return; } if (certNo.length 6 || certNo.length 18) { alert(证件号码长度应为 6-18 位); certNoInput.focus(); return; } // 校验通过后进入模拟查询流程 mockSearch(name); });这段逻辑里最重要的一个词是preventDefault它把 form 的默认提交行为掐掉了。很多初学者在写模拟页面时会把 action 留空点查询按钮页面就刷新一下输入内容全部消失体验非常糟糕。preventDefault就是解决这个问题的标准姿势。trim方法用来去掉首尾空格避免用户输入“ 张三 ”这种带空格的姓名通过校验。证件号长度校验我留了 6 到 18 位的范围这个范围足够模拟身份证和护照号又不会因为卡得太死让测试者随手输入的数字被拒。alert虽然丑但是原生方法不需要引入任何 UI 组件在模拟页面里完全够用。如果你觉得 alert 太刺眼也可以用页面内的 span 提示但那样要多写几行显示和隐藏逻辑我留给有精力的人去扩展。4.2 模拟查询结果的几种常见做法校验通过之后模拟页面要给用户一个“查到了”或“没查到”的反馈。常见做法是写一个本地静态数据数组里面放几条假身份信息然后把输入值和数组比对命中就显示查到否则显示未查到。我把这个逻辑压缩成一个很短的函数// 本地假数据仅供演示与真实学信网无关 const MOCK_DB [ { name: 张小明, certNo: 110101199001011234, degree: 本科学历认证通过 }, { name: 李芳, certNo: 110101199202023456, degree: 专科学籍注册在读 } ]; // 根据姓名匹配假数据填充结果提示区 function showMockResult(name) { const resultBox document.getElementById(result-box); const resultMessage document.getElementById(result-message); const matched MOCK_DB.find(item item.name name); resultBox.hidden false; if (matched) { resultMessage.textContent 已查询到 ${matched.name} 的相关信息${matched.degree}; resultMessage.style.color #1f9d55; } else { resultMessage.textContent 未查询到相关记录请确认输入信息是否正确。; resultMessage.style.color #e74c3c; } }resultBox.hidden false是把第 2 章预留的hidden属性移除掉这比改 className 更直接也更能跟 HTML 语义对得上。MOCK_DB 里的假数据一定要用明显能看出是假的数据比如全名加完整虚构证件号。不要把真实存在的姓名和证件号写进去哪怕看起来像随机生成也不行——模拟页面的数据越像真的越容易在演示时产生误会。find方法在找不到匹配时返回undefined这就天然形成了“查到/未查到”两条分支不需要再写复杂的循环判断。颜色直接内联写在 JS 里是为了省事但如果样式复杂我会建议改为切换 className把颜色留在 CSS 里JS 只负责增删 class这样两者职责清楚。4.3 模拟“查询中”状态延时与防重复点击如果你想让模拟更像真查询可以再加一个“查询中”的延时状态。这里要额外处理一个细节在查询过程中用户会忍不住连续点按钮如果不加保护setTimeout 会被触发多次结果区被刷新多次体验反而更乱。我习惯用一个布尔变量isLoading加按钮禁用状态来兜底let isLoading false; // 模拟网络延时展示按钮加载态防止重复提交 function mockSearch(name) { const btn document.querySelector(.btn-submit); if (isLoading) return; isLoading true; btn.disabled true; btn.textContent 查询中...; setTimeout(() { btn.disabled false; btn.textContent 查 询; isLoading false; showMockResult(name); }, 800); }isLoading是一把锁在异步操作完成前拦掉所有重复点击这是前端交互里最基础的防重复提交模型。800ms 是合适的模拟延迟太短看不到状态变化太长会让用户觉得页面卡死。按钮文字在查询期间变成“查询中...”并加disabled让用户在视觉和操作上都感知到“这个按钮现在不可再用”。如果你在 4.1 的代码里已经把提交处理接到mockSearch上那这一节只需要补一个函数不用再改事件绑定代码结构非常干净。4.4 把模拟逻辑与后端接口解耦为什么不要在这类项目里写真实请求这一小节要谈的不是技术是实现边界。我拆过不少仿站项目最常见的反面教材是为了表现“查询功能完整”在 JS 里写了一个fetch或axios请求指向某个真实或虚构的后端接口。方向完全错了。这个资源的定位是前端页面模拟它的价值在于练习布局、样式和交互编排不在于真的联调一个查询服务。引入真实请求后第一你无法保证接口安全第二会让页面在断网环境下无法演示第三也是最关键的——一旦有人拿到这份代码稍加改造就可能变成一个钓鱼页面的外壳这是所有仿站项目里最危险的坑。所以我的建议是这份资源里所有数据都来自本地不引用任何外部接口地址不引入 axios、jQuery 这类库不配置网络相关的全局拦截器。如果你未来要把它扩展成某个课程大作业需要对接教务系统数据也应该把请求封装在一个独立模块里和页面模拟逻辑分开方便在演示时用 mock 数据替换。这种解耦是前端工程里很基础但很重要的习惯惯性培养越早越好。判断标准很简单把页面断网打开所有功能应该照样可用。做到了这一点它才是一个合格的离线静态模拟项目也才符合“模拟”这两个字的本来含义。5. 避坑仿站项目最常见的五个翻车点仿站不是照着截图堆代码坑大多踩在“以为很像”和“真的像”之间。这一章把我自己拆这类项目时遇到过的五类问题按现象、原因、解决的方式列出来都是可以直接对号入座的。5.1 像素级复刻陷阱为什么不要盯着截图调样式现象拿着原页面截图用 px 一点点对齐每个边距都和截图一致但换一台电脑或换浏览器打开页面歪得不成样子。原因截图是固定分辨率下的渲染结果你的屏幕缩放比、浏览器默认字号、操作系统字体渲染都会影响实际像素。1600px 宽截图上的 24px在 125% 缩放的笔记本上实际会被放大而媒体查询断点不会自动跟着截图跑。解决我养成的一个习惯是设计阶段只看结构和比例不看绝对像素。间距以 8px 为基准做倍数字号按照 12/14/16 一档一档取卡片的宽度用百分比或 max-width 约束而不是写死成 720px。这样在不同屏幕上至少是“等比缩放”而不是“从某一个焦点开始裂开”。5.2 字体图标与版权字体哪些素材不能直接商用现象从原页面复制了 iconfont 的样式和字体文件本地打开时有的图标显示成方框部署后还收到侵权警告。原因iconfont 的样式里往往通过远程地址引用字体文件资源一旦失效或域名受跨域限制就无法加载同时很多字体图标和特定字体是有版权的不能直接用于自己的项目哪怕只是练习也一样。解决模拟页面尽量用系统中文字体图标用简单的文字符号或内联 SVG 代替。真需要图标库时选择开源许可的库比如 Font Awesome 的免费版本或 Tabler Icons并保留其版权声明。这个习惯不是让你绕着版权走而是让你在动手前想到“素材也有归属”这件事。5.3 表单提交路径模拟页面为什么不能发真实请求现象表单设置了 action 和 method点查询按钮后页面跳转或刷新有时候还把输入内容发到了某个地址用户以为是查询成功结果是“404”或者后端报错。原因对模拟页面的边界没想清楚。form 的默认行为是把表单数据打包发送到 action 指向的地址如果 action 写#会触发滚动到页首如果写一个真实地址就变成了一次没有意义的真实请求。解决给 form 的 submit 事件绑定preventDefault或者干脆不写 action、method 属性只用监听事件处理。我在第 4 章代码里已经这么做了。如果你拿到一份别人写的模拟页面发现它带了真实接口第一件事就是把那行请求删掉替换成本地 mock 数据。不要觉得留着它对演示无害它才是最危险的合规隐患。5.4 兼容性缺口flex 与 grid 在老旧浏览器的表现现象同一个页面在公司电脑上正常在客户的老 Windows 浏览器上打开时导航变竖排、按钮错位、变量不生效。原因CSS 变量和 flex 的部分语法在旧版浏览器上支持度不够。特别是 CSS 变量在 IE 里完全不支持flex 的gap属性在部分老浏览器里也被忽略。解决先确认你的目标用户在哪里。如果只是学习练手声明支持“最新版 Chrome、Edge、Firefox”就够了不必为 IE 花额外时间。如果资源要给别人使用则要写兼容性说明。技术层面给关键 CSS 加 fallback 值比如先写 background 一个纯色再写 background 的渐变或变量版本flex 间距不要依赖 gap改用 margin 也能达到相同效果。这套思路叫渐进增强不是让你写两套样式而是让不支持新语法的浏览器至少不审美崩坏。5.5 合规红线仿站项目的合法使用边界现象有人把模拟页面改成和原站几乎一模一样不标注任何模拟信息诱导用户输入真实姓名、身份证号和手机号然后把这些数据收走。原因道德和法律的边界没守住。页面看起来像官方系统但它不是。用户基于信任输入的信息一旦被收集就是典型的钓鱼场景这在任何地区都是明确不合适的。解决这条不要有任何侥幸心理。模拟页面必须在显眼位置标注“仅供前端学习使用与真实学信网无关不提供查询服务”。代码里不能收集、保存、发送任何输入内容。如果你是自己练手把这些信息当作页面的一部分写进去如果是教学资源也要在文档里把这条边界讲清楚。合规这件事不是最后补一个免责声明而是从页面结构、代码逻辑到使用说明全链路都贯彻。6. 收尾三个验证习惯让模拟页面更可信页面写完不是终点验证才是让它“可信”的最后一关。我有三个固定在收尾阶段做一遍的习惯成本低收益高推荐你直接套用。第一个是开无痕窗口验证。浏览器插件和缓存经常掩盖样式问题我在本地打开页面时一定会右键选择“无痕模式”确保页面从零加载CSS 和字体都走真实路径。条件是本地起一个静态服务而不是直接双击 HTML 文件。直接双击时部分浏览器会限制某些资源的加载特别是本地引用 JS 的时候。我一般用npx serve或者 VS Code 的 Live Server 插件一条命令就把当前目录当成服务器完整模拟线上访问环境。第二个是多尺寸过一遍。打开开发者工具的设备模拟375px、768px、1280px 三档各截一张图重点看三样东西导航是否换行、表单卡片是否溢出屏幕、验证码行是否还在同一排。不要只看手机档和桌面档768px 的平板档最容易出现“刚好够宽但很挤”的中间态。如果你改了一处样式这三档要重新过一遍因为媒体查询的影响是跨尺寸的。第三个是走一遍键盘流程。用 Tab 键依次遍历页面里的每个链接和输入框观察焦点是否可见、顺序是否合理。第一次做这件事的人通常会被吓一跳——很多用鼠标看没问题的页面键盘走起来焦点是乱的。顺序乱的根源往往是 HTML 中元素排放顺序和视觉顺序不一致调整方法很简单让代码里的 DOM 顺序尽量等于视觉顺序。说一个我自己的教训。有一次我做完一个仿站项目自认为布局已经很完善了结果在会议室演示时连接投影仪之后页面整体被放大右侧的表单卡片直接被裁掉一截现场非常狼狈。后来我才意识到投影用的是 1024px 分辨率而我的页面只在 1280px 和 375px 两档下验证过。从那以后我每次做完都会强制自己走一遍无痕、多尺寸、键盘导航这三件事再补上一档 1024px 的检查。希望这一点经验也能帮到你。本文还有配套的精品资源点击获取