不绕圈子直接说这个项目是干嘛的。大学英语四级成绩查询页就是那种输入准考证号和姓名、点查询就能看到总分和听力阅读写作成绩的页面。很多学校教务系统、班级信息平台、甚至实验室项目里都需要这类界面而用纯 HTML 和 CSS 实现一个仿官方版的成绩查询页是特别适合前端初学者练手的完整小项目——它不涉及后端逻辑却能把你对布局、表单、表格、字体、间距、响应式的理解全部串起来。这个页面做出来之后你拿到的是一套可以直接打开的静态页面首页是查询入口输入信息后跳到成绩展示页效果上跟你在 CET 官网看到的查询界面非常接近。全程不需要 JavaScript 参与交互跳转用form的action属性或者两个独立 HTML 页面就能完成。文章里我会给出完整的 HTML 结构和 CSS 核心样式最后还会教你怎么生成效果图、怎么截图验收、怎么让页面在不同屏幕下不崩。适合刚学完 HTML/CSS 基础、想做一个完整作品的人也适合前端课设、期末作业需要交网页设计成品的朋友参考。1. 先拆解真实四级成绩查询页的界面逻辑动手写代码之前先把真实页面看明白。很多人一上来就写div套div结果做出来的东西四不像原因就是没搞清楚官方页面到底在传达什么信息层级。1.1 真实页面长什么样布局分层拆解大学英语四级成绩查询页面不管是哪个渠道的版本核心布局都可以拆成四层顶部横幅区深蓝色或红色系的横幅背景上面放中国教育考试网或全国大学英语四、六级考试CET字样左侧有时会放一个考试标识图整体视觉重心在左上角。查询表单区这是整个首页的核心白色卡片居中里面有准考证号姓名两个输入框一个查询按钮偶尔还有找回准考证号的链接。部分版本会要求输入验证码但静态页面一般不需要做。提示信息区表单下方会有小字提示比如请输入完整的准考证号姓名与准考证号须匹配之类的说明用来引导用户正确输入。底部信息区灰色小字放版权信息、主办单位、联系方式或者一个简单的导航链接组。这个层级关系决定了你的页面从上到下依次是大面积色块 → 白色浮层 → 小字辅助信息 → 灰色页脚。所有风格设计都要围绕这个顺序展开。1.2 我们要复刻哪些核心元素从用户视角看这个页面最让人一眼认出的元素有三个蓝/红色渐变横幅很多教育类官网都喜欢用深蓝配浅蓝的渐变营造严肃、可信的感觉。四级查询页也基本是这个路子。居中白色卡片卡片承载表单四周留白充足给用户一种在这里操作的心理暗示。圆角输入框加实心按钮输入框通常是圆角矩形、带浅灰色边框按钮是蓝底白字或者红底白字hover 时颜色加深。成绩结果页则另有几个标志性元素总分大字、成绩详情表格、合格线提示425 分以及成绩报告单样式的卡片区域。这些元素我会在第三部分具体展开。1.3 技术选型为什么只用 HTML CSS有人可能会问查询成绩为什么不接后端为什么不连数据库这个项目标题写得很清楚——仿大学英语四级成绩查询重点在仿字上也就是还原界面效果而不是真正实现查询逻辑。用纯 HTML CSS 做这个项目有一个很大的好处零环境依赖。任何一个浏览器双击打开 HTML 文件就能看效果不需要装 Node.js不需要启动服务不需要配数据库。这对初学者特别友好而且交作业、做演示的时候也不会因为它依赖某个本地服务而跑不起来。那页面之间怎么跳转两个办法第一用a标签从index.html链到result.html第二用form actionresult.html让表单提交后跳转。查询按钮做成typesubmit后点一下就会打开结果页交互路径是通的。如果你想让效果更像真的甚至可以给按钮加上onclicklocation.hrefresult.html不过那是 JS 的范畴了纯 CSS 方案用form属性就够了。提示如果希望不论输入什么都能跳到成绩页用form actionresult.html即可如果希望尽量不用 JS 又要有跳转效果直接在按钮外包一层a标签用 CSS 把链接伪装成按钮也是常见的做法。2. 查询首页表单布局与视觉重心处理首页是整个项目成败的关键因为别人打开你的页面第一眼看到的就是它。布局上核心就一句话让所有内容水平垂直居中输入框和按钮形成视觉焦点。2.1 页面骨架容器、横幅、表单卡片先搭 HTML 结构我直接给一份可以跑的版本!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title全国大学英语四级考试CET-4成绩查询/title link relstylesheet hrefstyle.css /head body !-- 顶部横幅 -- header classtop-banner div classbanner-inner h1全国大学英语四级考试CET-4/h1 p成绩查询系统/p /div /header !-- 查询区域 -- main classquery-section div classquery-card h2成绩查询/h2 p classsubtitle请输入准考证号和姓名进行查询/p form actionresult.html methodget div classform-group label forexamId准考证号/label input typetext idexamId nameexamId placeholder请输入15位准考证号 required /div div classform-group label forname姓名/label input typetext idname namename placeholder请输入姓名 required /div button typesubmit classbtn-query查 询/button /form p classtips* 忘记准考证号请联系学校教务处或所在学院/p /div /main !-- 底部信息 -- footer classsite-footer p本页面为静态演示页面仅用于前端学习参考/p p© 2024 CET-4 Score Query Demo/p /footer /body /html结构上分三大块header横幅、main表单区、footer版权区。语义化标签的好处是有利于理解页面结构也方便以后维护和 SEO 识别。2.2 输入框和按钮的细节处理表单区的 CSS 是整个首页的精华。我见过很多初学者做的表单输入框和按钮的宽度不统一、文字对不齐、点击区域太小这些细节直接决定了页面像不像官方出品。核心样式如下/* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Arial, sans-serif; background-color: #f0f2f5; min-height: 100vh; display: flex; flex-direction: column; } /* 顶部横幅 */ .top-banner { background: linear-gradient(135deg, #1a3a6b 0%, #2a5caa 100%); padding: 48px 20px; text-align: center; color: #fff; } .banner-inner h1 { font-size: 28px; font-weight: 700; letter-spacing: 2px; } .banner-inner p { font-size: 16px; margin-top: 8px; opacity: 0.85; letter-spacing: 4px; } /* 查询卡片 */ .query-section { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px 20px; } .query-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 36px 40px; width: 460px; max-width: 100%; } .query-card h2 { text-align: center; font-size: 22px; color: #1a3a6b; margin-bottom: 4px; } .query-card .subtitle { text-align: center; font-size: 13px; color: #888; margin-bottom: 24px; } /* 表单组 */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; } .form-group input { width: 100%; height: 42px; border: 1px solid #dcdfe6; border-radius: 6px; padding: 0 12px; font-size: 14px; color: #333; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus { border-color: #2a5caa; box-shadow: 0 0 0 3px rgba(42, 92, 170, 0.15); } .form-group input::placeholder { color: #bbb; } /* 查询按钮 */ .btn-query { width: 100%; height: 44px; background: linear-gradient(135deg, #2a5caa 0%, #1a3a6b 100%); color: #fff; border: none; border-radius: 6px; font-size: 16px; letter-spacing: 6px; cursor: pointer; transition: opacity 0.2s, transform 0.2s; margin-top: 8px; } .btn-query:hover { opacity: 0.9; transform: translateY(-1px); } .btn-query:active { transform: translateY(0); } /* 提示文字 */ .tips { text-align: center; font-size: 12px; color: #aaa; margin-top: 16px; } /* 页脚 */ .site-footer { text-align: center; padding: 20px; font-size: 12px; color: #999; background: #fff; border-top: 1px solid #eee; }几个值得展开说说的点第一box-sizing: border-box是一次性解决宽度计算问题的关键。没有它你给 input 设置了width: 100%再加上padding和border实际宽度会超出父容器导致表单右边界溢出。加了这个重置所有元素的宽高都按内容盒计算省掉一堆麻烦。第二focus 状态的蓝色光晕效果。box-shadow: 0 0 0 3px rgba(42, 92, 170, 0.15)这种写法是用零模糊 3px 扩散模拟出 3px 的半透明边框视觉上就是聚焦时输入框外面多了一圈淡淡的光晕。这也是现在很多前端组件库比如 Element UI、Ant Design通用的设计手法比单纯border-color变化更有层次感。第三按钮文字间距问题。letter-spacing: 6px是为了让查 询两个字中间其实有个空格在按钮里看起来更舒展。中文字少的时候适当加大字间距能消除局促感这是排版上很实用的小技巧。2.3 提示信息与底部备案信息如果你仔细观察官方网站所有输入类页面都有一行不起眼但很重要的提示小字。我在页面里写的是* 忘记准考证号请联系学校教务处或所在学院这行字的作用是让用户安心——万一真的忘号了也知道去哪找。实际项目里你可以根据场景替换成成绩数据仅供参考以学校通知为准查询高峰期请耐心等待等文案。底部信息区的 CSS 也值得一提site-footer用了白底加 1px 上边框和上面的灰白背景形成区隔文字用 12px 的浅灰色。这里关于视觉层次有一个普遍规律页面越往下信息重要性越低字号和颜色对比度也应该越低。很多新手喜欢全页面都用 16px 黑色字结果整个页面没有主次看起来就像一份没排版的文档。3. 成绩结果页从分数表到成绩单的层次设计成绩结果页是这个项目的第二个核心页面。相比查询首页它的信息密度大得多总分、单项分、合格线、报告单编号、考生信息全都要展示。怎么把这些信息安排得清晰、美观、有官方感我的方案是总分大数字卡片打头成绩明细表格居中报告单样式收尾。3.1 总分大数字卡片的设计思路用户查成绩最关心什么当然是总分。所以页面的第一视觉焦点必须是那个数字。设计师普遍采用的处理方式是用一个浅色圆角卡片里面放总分542这种字样的超大数字旁边的辅助信息考试时间、姓名、学校用小字排开。HTML 结构我这样写div classscore-card div classscore-left p classscore-label总分/p p classscore-value542/p /div div classscore-right p姓名张三/p p准考证号123456789012345/p p考试时间2024年12月/p p报考院校XX大学/p /div /divCSS 核心部分.score-card { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); border: 1px solid #dfe6f0; border-radius: 12px; padding: 28px 32px; margin-bottom: 24px; } .score-label { font-size: 14px; color: #666; letter-spacing: 2px; } .score-value { font-size: 56px; font-weight: 800; color: #1a3a6b; line-height: 1.2; } .score-right p { font-size: 14px; color: #555; line-height: 1.9; }这里用display: flex做左右两栏布局左边总数、右边考生信息。很多人做成绩页习惯把所有信息堆在一张 table 里但视觉上总分和其他信息的重要性完全不同用 table 就拉不开层级。卡片化的好处就是用一个色块把最重要的数字单独框出来。本人实测下来font-size: 56px是一个比较合适的震撼值——小于 40px 不够醒目大于 72px 又容易溢出卡片比如满分 710 显示没问题但三位数以下的数字在 80px 下会很空。如果你希望更稳妥可以给.score-value加上font-variant-numeric: tabular-nums保证数字等宽视觉上更整齐。3.2 成绩明细表格与隔行变色成绩详情区一般用表格展示听力、阅读、写作与翻译的分数。表格的常见结构table classscore-table thead tr th考试项目/th th满分/th th得分/th th备注/th /tr /thead tbody tr td听力理解/td td248.5/td td181/td td—/td /tr tr td阅读理解/td td248.5/td td199/td td—/td /tr tr td写作与翻译/td td213/td td162/td td—/td /tr tr classrow-total td总分/td td710/td td542/td td通过/td /tr /tbody /table对应的表格样式重点是隔行变色和表头样式.score-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); margin-bottom: 24px; } .score-table th { background: #1a3a6b; color: #fff; padding: 14px 16px; text-align: center; font-size: 14px; font-weight: 600; } .score-table td { padding: 14px 16px; text-align: center; font-size: 14px; color: #333; border-bottom: 1px solid #f0f0f0; } /* 隔行变色 */ .score-table tbody tr:nth-child(even) { background: #f8fafc; } /* 总分行特殊化 */ .score-table .row-total { background: #f0f4ff !important; font-weight: 700; } .score-table .row-total td { color: #1a3a6b; }隔行变色用的是tr:nth-child(even)选择器让偶数行变成浅蓝色灰底。为什么用隔行变色因为表格一旦超过四五行人眼很容易看串行有了斑马纹就能顺着浅色带横向阅读。这是表格设计的经典做法不是什么高深技术但极其实用。另外注意总分行的处理我用了background: #f0f4ff !important加!important是因为nth-child(even)的选择器优先级在:nth-child和.row-total之间会产生竞争保险起见直接提升优先级。不过实际写项目时最好避免!important用tbody tr.row-total提高选择器权重是更干净的方案。能在代码里少用一个!important以后维护就少踩一个坑。3.3 报告单区域删除线、印章、说明文字成绩结果页往下翻通常还有一块成绩报告单样式的区域。这块区域在官网上其实长得很像一张小卡片左上角标题写全国大学英语四级考试成绩报告单右上角一个编号中间有考生的具体信息和各单项成绩底部有日期和说明。在我做的这个效果里我会加一个模拟印章的圆形元素以及一行带删除线的说明文字——这两个都是我在研究官网样式时发现的细节。先看关键 HTMLdiv classreport-card div classreport-header span classreport-title全国大学英语四级考试成绩报告单/span span classreport-no编号CET-2024-123456/span /div div classreport-body p classreport-passeddel未通过/del 已通过425分及以上为及格/p p听力181 分 阅读199 分 写作与翻译162 分/p p本成绩单仅供演示使用/p /div div classreport-stamp span合格/span /div /div对应的 CSS.report-card { position: relative; border: 2px dashed #b0c4de; border-radius: 12px; padding: 24px 28px; margin-top: 20px; background: #fafcff; } .report-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dfe6f0; padding-bottom: 10px; margin-bottom: 12px; } .report-title { font-size: 16px; font-weight: 700; color: #1a3a6b; } .report-no { font-size: 12px; color: #999; } .report-body p { font-size: 14px; color: #444; line-height: 2; } .report-body del { color: #bbb; } .report-stamp { position: absolute; right: 30px; bottom: 30px; width: 70px; height: 70px; border: 3px solid #c0392b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #c0392b; font-size: 20px; font-weight: 700; transform: rotate(-20deg); opacity: 0.75; }删除线在这里是个很有意思的细节。.report-body del渲染出来的效果是未通过三个字带一条横线语义上表达这个状态已被否定视觉上也比直接用文字写已通过更生动。CSS 里删除线对应text-decoration: line-through这是一个从纸质办公场景延续下来的排版约定在 HTML 中直接用del标签就能实现。模拟印章的圆形用border-radius: 50% 红色边框 transform: rotate(-20deg)做出来。印章斜着盖才有盖章感这是很多人容易忽略的小细节。实际效果里红色圆章会压在一角透明度 0.75 避免抢了正文的风头。提示del标签自带删除线样式但如果因为全局重置把text-decoration干掉了记得手动在 CSS 里加text-decoration: line-through。类似情况还有ins的下划线重置样式后经常需要单独补。4. 细节点睛字体、间距、阴影与模拟官方感很多人做完页面总觉得差了点什么其实差的不是功能而是细节。官方页面之所以看着正规靠的不是某个炫技特效而是字体、间距、阴影、对齐这些基础元素的克制和统一。4.1 为什么官方页面看起来干净这里有一个很容易被忽视的原则颜色数量越少页面越显高级。官方的教育类网站通常只用一个主色调深蓝或红色加黑白灰。在本文的方案里主色调是深蓝#1a3a6b辅助色是稍亮一点的#2a5caa加上白色卡片、灰色文字、浅灰背景整个页面不超过 5 种颜色。对比一下如果你在页面里同时用了红、绿、紫、橙来标各种信息页面信息一多就显得嘈杂。用户其实不需要每个数字都用不同颜色来区分用相同的颜色代表相同等级的信息反而是更高级的处理方式。4.2 中文字体栈和数字字体font-family的设置看似简单其实很讲究。我给页面定义的是font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Arial, sans-serif;这套字体栈从左到右是系统按顺序寻找可用字体的过程Windows 下优先用微软雅黑macOS 下优先用苹方两者都没有就退回 Arial。为什么不用自定义网页字体因为这是个静态演示页面引入外部字体文件会拖慢加载还会有跨域、兼容问题。中文字体文件动辄几 MB普通页面在系统字体够用的情况下没必要这么做。数字的显示有一点容易踩坑默认情况下阿拉伯数字在各种字体里宽度不统一比如1和0宽度不同。如果成绩明细里多列数字要纵向对齐建议在表格里加上td { font-variant-numeric: tabular-nums; }tabular-nums会把数字切换成等宽数字这样 181、199、162 竖着看的时候个位、十位、百位都能对齐表格整齐度提升非常明显。4.3 阴影与圆角的克制使用卡片阴影我用的值是box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)很多人会问这个值怎么定的能不能随便写阴影的三个肉眼可见的维度是偏移距离、模糊半径、不透明度。这里0 4px表示阴影垂直向下偏移 4px页面光源默认在顶部20px是模糊半径数值越大边缘越柔和0.08的黑色透明度让阴影非常淡。这样的组合效果是卡片像浮在背景上的一层纸而不是一个硬邦邦的黑框。圆角方面卡片用 10-12px按钮用 6px标签和输入框用 6px。这里的原则是大卡片圆角可以稍大小控件圆角不能太大。如果按钮圆角做成 20px就会变成胶囊形状在这个语境下会显得过于活泼不像官方查询系统的风格。4.4 响应式移动端别崩这个项目虽然是仿官网 PC 页面但很多人会在手机上打开演示。所以基础的响应式处理还是要做的。核心思路是两个卡片宽度不能写死用max-width: 460px; width: 100%;保证小屏上卡片自动收缩。用媒体查询在窄屏下调整页面标题字号和卡片内边距。media (max-width: 480px) { .banner-inner h1 { font-size: 20px; } .query-card { padding: 24px 20px; } .score-card { flex-direction: column; text-align: center; padding: 20px; } .score-right { margin-top: 12px; } .report-header { flex-direction: column; gap: 8px; } }把.score-card在窄屏下改成纵向排列是为了避免左右两栏在小宽度下挤压变形。从我的经验来看一个静态页面只要保证 375pxiPhone SE 宽度下不横向滚动、文字不重叠就算合格了。5. 效果图生成与项目验收不只是能打开标题里写含效果图实际上我们做前端演示项目的效果图通常有两种来源一是浏览器页面截图二是设计稿导出。但这里有一个微妙的地方——效果图的本质是告诉大家做出来长什么样所以一张清晰、不打折扣的页面截图就是最好的效果图。5.1 怎么截出一张能放进作业里的效果图截图的工具每个人都有浏览器自带截图、系统截图工具、或者是 Chrome DevTools 的节点截图。我的建议是用Chrome 开发者工具的截图功能打开页面后按 F12 打开 DevTools按CtrlShiftPMac 是CmdShiftP打开命令菜单输入screenshot选择 Capture full size screenshot它会自动滚动截取整个页面的完整内容包括首屏以下的部分生成一张无缝拼接的长图。这样截出来的图没有滚动条、没有工具栏干净且完整非常适合作业提交、项目文档配图或者博客配图。如果你还需要局部效果图比如只展示查询卡片的细节可以选中对应的 DOM 节点后在 DevTools 里Capture node screenshot它就只截这个元素的范围效果跟设计稿切片差不多。5.2 再加一个打印样式让成绩单能直接打印既然做了成绩报告单不如顺手把打印样式也做上。很多校园场景里成绩查询页面是真的会被打印出来的——比如学生截图、自助打印终端。我们可以为打印单独写一个样式块media print { /* 隐藏按钮和多余操作区域 */ .btn-query, .site-footer, .tips { display: none !important; } /* 去掉背景色和阴影省墨且避免打印不出背景 */ .query-card, .score-card, .score-table, .report-card { box-shadow: none !important; background: #fff !important; border: 1px solid #ccc !important; } body { background: #fff; } }打印样式里最常见的坑是有些浏览器默认不打印背景色和背景图片所以你明明看到卡片是浅蓝色的打印出来却是白底。加一个显式的background: #fff !important可以避免这种意外。5.3 浏览器兼容性检查清单这个页面用到的 CSS 特性都是比较基础的flex、linear-gradient、box-shadow、border-radius、:focus、:nth-child、媒体查询。这些特性在 IE11 之后的浏览器里基本都支持唯一要留意的几点gap属性在 flex 布局里旧版 Safari15 之前不支持。我上面的代码里给report-header用了gap如果目标浏览器包含旧版 Safari最好改成margin。:nth-child的even/odd参数是 CSS3 的内容现代浏览器都没问题但如果兼容旧浏览器可以手动给偶数行加classeven。font-variant-numeric在 Chrome 和 Safari 下效果良好但在部分 Linux 系统字体下可能不生效不生效也不影响样式只是数字对齐略有差异。我建议验收时至少打开 Chrome、Edge、Firefox 各看一遍以及用 DevTools 的设备模拟切到 iPhone 和 Android 的尺寸看一眼没有横向滚动条和错位就算通过。最后再分享一个我在做这类仿官网页面时的心得不要盯着设计稿从零硬写而是先打开真实网站一边看一边拆它每一块区域的作用。你可能不会用到它的任何元素但这个拆解过程会让你明白为什么那里要留白、为什么那里要小字、为什么按钮是那个颜色。把这些为什么想明白了HTML 和 CSS 写起来根本不愁没思路。另外这个项目做完之后你还用同一套布局思路去改造其他页面——比如仿普通话成绩查询、仿计算机等级考试查询。改改标题、换换表格数据几分钟就能出一个新页面。作为练手项目它的可复用性是真的高。