简介这是一份以京东官网首页为蓝本的高保真前端网页成品完整运用 HTML、CSS 和原生 JavaScript 实现适合大学生作为期末作业或网页设计课程设计参考。面向有一定前端基础、希望快速获得整站页面效果或学习电商首页布局的学习者可帮助理解顶部导航、广告轮播、商品楼层、内容推荐、底部链接等模块的组合思路与实现技巧。压缩包总计包含六百四十八个文件以商品图、横幅图、动效图等图片素材为主另有样式表、脚本和首页文档整体约八点四五兆目录清晰方便替换图片与调整配置。目前已有七百七十四人学习下载说明这套模板在同类作业和实操训练中具有不错的参考价值。源码可直接运行对照代码学习页面分区、轮播交互、样式适配等技能并借助现成图片与脚本快速完成自己的电商首页作品节省从零搭建的时间。1. 期末作业选京东首页官网练的是三件套的完整闭环大学生HTML5期末作业的题目列表里仿京东首页几乎是出现频率最高的一个。原因并不是它简单而是它的结构足够标准顶部导航、搜索区、轮播图、秒杀倒计时、楼层商品、页脚服务承诺每一个模块恰好对应 htmlcssjs 网页制作的一类基本功练完这一整页等于把 Web 前端网页制作的常规动作都过了一遍。所谓 ui还原度100%在真实交付里并不是像素级拷贝而是结构、间距、hover 交互和滚动体验对得上参考站。这个标题真正想解决的是两类人的问题交作业的大学生和要给新人布置练手题的老手。自己写出来的代码答辩时可以讲清楚每一行直接下载成品改个名第一句这个轮播怎么实现的就会穿帮。这套页面用于作业和练手没问题别拿去冒充官网商用边界先放在这里。2. 用 HTML5 语义化骨架先把京东首页结构调整对2.1 开局骨架DOCTYPE、charset 与 viewport 为什么别省网页制作的第一步不是写样式是把文档类型和编码声明写对。很多作业代码在本地双击是正常的交到老师的机器上出现乱码多半是meta charsetutf-8写在了title后面或者干脆省略了 DOCTYPE。HTML5 的文档声明只有一行浏览器见到它才会进入标准模式否则按 Quirks 模式渲染盒模型和行高都可能出现诡异偏差。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title京东首页HTML5 期末作业/title link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/index.css /head body !-- 页面结构写在这里 -- script srcjs/index.js/script /body /htmllangzh-cn声明页面语言对搜索引擎和浏览器翻译都有提示作用charset必须位于head前部理论上要出现在前 1024 字节内否则部分浏览器在解析字符集前可能按默认编码渲染出乱码。viewport是移动端适配的入口没有这一行手机浏览器会按 980px 的默认视口渲染桌面端看着没问题的页面到手机上会整体缩小。2.2 京东首页的模块切分与语义化标签选择拿到参考站之后不要急着打开编辑器写代码先在纸上把页面切成若干块。京东首页官网的布局逻辑非常清晰从上到下依次是顶部信息条、搜索区、主导航、轮播区、秒杀区、楼层商品区和页脚。切分的原则是一个独立功能就是一个模块模块内部再继续细分而不是看到一个div就接一个div。模块区域推荐 HTML 标签关键视觉特征顶部信息条与搜索区header京东红背景、logo 与搜索框居中主导航与二级菜单nav横排链接、hover 下拉轮播图section大图切换、指示器、左右箭头秒杀倒计时section数字变动、价格醒目楼层商品section大块商品卡片、hover 上浮页脚服务承诺footer多列链接、版权信息这属于理论先立住的部分HTML5 语义化标签不仅是规范要求更影响 CSS 的命名和 JS 的选择器写法。用header和footer包裹首尾nav包导航section区分内容块CSS 里就可以放心使用header nav ul li a这种有层级的选择器而不是面对一整片div classadiv classb无从下手。结构树按缩进写出来大概是这样的body ├── header.jd-header │ ├── .header-top用户入口 │ ├── .search-boxlogo 搜索框 │ └── nav.nav-main导航栏 ├── main.jd-main │ ├── section.banner-slider轮播 │ ├── section.seckill秒杀 │ ├── section.floor楼层商品 │ └── section.guess-like猜你喜欢 └── footer.jd-footerUI 还原度高不高的第一道分水岭就在这一层结构切分清楚了CSS 才能对应上结构切分乱了后面写多少代码都在补窟窿。2.3 别用 div 走天下语义化结构是答辩的得分点不少成品源码存在同一个问题整个页面从头到尾全是div靠 class 区分。写起来确实快但老师打开代码第一眼看到的就是可维护性差。语义化标签在这里的作用不单是规范更是让阅读代码的人三秒钟内看出页面分了几大块。一个实用建议每个section里至少放一个带class的标题元素比如h2 classfloor-title。这样页面有明确的文档大纲CSS 里定位模块也方便。京东首页官网的楼层很多每个楼层一个section标题用h2商品区用ul li而不是散落的div列表语义上更合适CSS 清理默认样式也更简单。这个习惯延续到简历项目和工作中价值比多写十行样式大得多。3. CSS 布局还原从 reset 到京东红的像素控制3.1 reset 与盒模型所有对齐失误的源头打开浏览器直接写 CSS第一行一定要处理默认样式否则ul自带左边距、body自带 margin、img自带边框页面永远对不齐。老项目流行完整版 reset期末作业没必要一份精简版足够覆盖常见问题核心是统一盒模型。* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; border: 0; } button, input { font: inherit; }box-sizing: border-box是这里最重要的一行。默认的 content-box 下宽度写 1210px 再加 padding 和 border实际占位会超过 1210px两个卡片放一行时第二个被挤到下一行改成 border-box 后width就包含了内边距和边框算栅格时才不会出意外。img的display: block是为了消除图片底部的几像素空白这是图片下方文字或按钮对不齐的常见原因。3.2 定宽容器加 flex搭出导航与商品卡京东首页官网早年版本使用固定宽度居中布局典型宽度在 1210px 左右后来经过多次改版宽度和响应式策略都有调整。做仿站练习时推荐先按固定宽度实现再考虑适配。固定宽度布局的公式很简单最外层一个容器设置width和margin: 0 auto内部所有模块围绕它排列。.container { width: 1210px; margin: 0 auto; } .nav-items { display: flex; justify-content: space-between; align-items: center; height: 40px; }justify-content: space-between让导航项两端对齐中间间距自动分配这一行是还原京东首页导航栏的关键。值得花点时间理解它和space-around、space-evenly的区别三种值对应不同间距逻辑是 flex 布局里最容易产生视觉差异的参数。flex 属性值间距表现适用场景space-between首尾贴边中间均分导航栏、工具条space-around每个项目两侧等距图标组、标签组space-evenly项目与容器边缘等距均匀分布的按钮区商品卡片区域一般使用flex-wrap: wrap配合固定宽度子项实现一行放几个、放不下自动换行的效果。常见做法是五个卡片一行每个卡片宽度等于容器宽度减去间距后除以 5这个计算建议用 CSS 变量或注释写明避免后期调整间距时重新数像素。3.3 精灵图、隐藏文字与 background 定位京东首页官网的很多图标是看不见文字的这是老牌电商页面常见的处理方式文字真实存在于 HTML 中但通过 CSS 把它藏起来同时用背景图显示图标。好处是屏幕阅读器能读到文字搜索引擎也能索引到图标本身只是视觉效果。.logo { width: 190px; height: 90px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; overflow: hidden; white-space: nowrap; }text-indent: -9999px把文字推到屏幕外overflow: hidden防止超出的文字撑出滚动条white-space: nowrap确保文字在一行内被推走不会换行后从左侧露出来。这三件套在网页制作里非常经典关键词是css 文本不换行和控制溢出。如果图标是多个合成在一张雪碧图里还需要调整background-position两个值分别对应水平偏移和垂直偏移负值向左上移动背景。作业里不建议把所有图标都做成背景图因为期末答辩时老师很可能会问这个图标为什么不直接放img。合理的答案是图标属于装饰性内容用背景图可以减少请求并保持结构干净而商品图片是内容必须用img并保证 alt 属性。3.4 css 鼠标移入事件hover 与伪类选择器的常用写法UI 还原度里最容易扣分的是交互态这个在 CSS 这边主要由:hover完成。导航栏的二级菜单是最典型的场景鼠标移入一级菜单时二级菜单从隐藏变为显示离开时隐藏。隐藏用display: none显示用display: block这套逻辑再配合绝对定位就能实现css 伪类选择器怎么用的完整案例。.nav-item { position: relative; } .nav-item .sub-menu { display: none; position: absolute; left: 0; top: 100%; z-index: 999; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .nav-item:hover .sub-menu { display: block; }top: 100%让二级菜单贴在一级菜单底部left: 0让它们左对齐z-index: 999是为了防止菜单被后面楼层模块的背景或图片盖住。易踩的坑在这里:hover必须写在一级菜单项.nav-item上而不是直接写在.sub-menu自身上否则鼠标从一级菜单移动到二级菜单的路径上鼠标短暂离开了触发区域菜单会闪烁消失。除了:hover常见的还有:not(:last-child)用来实现除了最后一个元素之外都加右边框或分割线:nth-child(2n)用来做隔行变色。这些伪类选择器在仿站还原时几乎都会用到建议单独写一小段练习代码确认每个选择器的匹配范围再放进正式页面。3.5 优惠券圆切、价格渐变与删除线促销模块的还原细节京东首页的促销区域有大量卡片式设计比如优惠券样式视觉上是矩形卡片左右两侧各挖掉一个半圆缺口。这个效果如果直接用背景图缩放时会模糊用 CSS 实现更干净核心是利用::before和::after定位两个圆形色块。.coupon-card { position: relative; width: 280px; padding: 16px 20px; border: 1px dashed #ccc; border-radius: 6px; } .coupon-card::before, .coupon-card::after { content: ; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateY(-50%); } .coupon-card::before { left: -6px; } .coupon-card::after { right: -6px; }::before和::after的圆直径是 12pxleft: -6px让圆的一半露在卡片左侧另一半盖在卡片上看起来就是切了一个缺口。这个技巧的关键参数是偏移量必须等于直径的一半写 5px 或 8px 都会出现明显的错位。缺口里的背景色要跟随页面底色如果页面底色不是白色这两个圆形的background要改成对应颜色。价格区域是另一个细节密集点。京东的价格数字一般有两种状态现价和原价原价带删除线现价使用醒目的红色。删除线直接使用text-decoration: line-through如果想让价格数字本身带渐变效果用background-clip: text配合透明文字色.price { font-size: 28px; font-weight: 700; background: linear-gradient(90deg, #e1251b, #f70); -webkit-background-clip: text; color: transparent; }background-clip: text目前仍需要-webkit-前缀且color: transparent是必要条件否则文字颜色会盖住背景渐变。这个技巧对还原度的提升很明显但要注意它和背景图不能共存文字透明后背景图会从文字缝隙里透出来。4. JS 交互轮播、倒计时、tab 切换与返回顶部算法4.1 自动轮播setInterval 驱动 transform别去改每张图的 display轮播图是京东首页官网交互最重的模块。实现方式有很多最基础也是最稳的方案是让所有图片横向排成一行外层容器只显示第一张JS 通过修改整个列表的transform值来平移。这样浏览器只需要合成一层的位移性能比逐帧切换display好得多。div classslider idslider ul classslider-track li第一张/li li第二张/li li第三张/li /ul button classprev‹/button button classnext›/button /divconst track document.querySelector(.slider-track); const items track.children; const itemWidth 1210; let current 0; let timer null; function go(index) { const max items.length - 1; if (index 0) index max; if (index max) index 0; current index; track.style.transform translateX(${-current * itemWidth}px); } function play() { timer setInterval(() go(current 1), 3000); } function pause() { clearInterval(timer); timer null; } document.querySelector(#slider).addEventListener(mouseenter, pause); document.querySelector(#slider).addEventListener(mouseleave, play); play();代码的核心参数有三个单张宽度itemWidth、切换间隔 3000ms、当前索引current。注意itemWidth必须和 CSS 中每张图片占用的宽度一致。如果图片是响应式宽度这里不能写死应该用track.clientWidth / items.length动态计算否则页面宽度一变位移就错了。别忘了给track加一行transition: transform 0.3s ease否则图片会瞬间跳过去没有任何滑动过渡。鼠标移入暂停、移出继续这是还原京东首页轮播交互的必要动作。pause()里除了clearInterval把timer置为null是好的习惯避免重复调用play()时创建多个定时器造成切换速度越来越快的经典 bug。4.2 秒杀倒计时与 js 保留2位小数秒杀区的倒计时是京东首页官网的固定模块逻辑是计算当前时间到某个目标时间点的差值再拆成时、分、秒。倒计时看起来简单大部分作业有两个常见错误一是把分钟算成60二是秒数补零不统一。function toTwo(n) { return String(n).padStart(2, 0); } function calcRemain(target) { const remain Math.max(0, target - Date.now()); return { h: Math.floor(remain / 3600000), m: Math.floor(remain / 60000) % 60, s: Math.floor(remain / 1000) % 60, }; } setInterval(() { const target new Date(); target.setHours(24, 0, 0, 0); const r calcRemain(target.getTime()); document.querySelector(.countdown .h).textContent toTwo(r.h); document.querySelector(.countdown .m).textContent toTwo(r.m); document.querySelector(.countdown .s).textContent toTwo(r.s); }, 1000);% 60取模是关键总毫秒数除以 3600000 得到小时再对 60 取余得到分钟秒数同理。这样即使倒计时对象跨天分钟和秒数也不会出现 60。padStart(2, 0)是 ES2017 的字符串补零方法比传统的三元判断更简洁也正好覆盖了js 保留2位小数这类参数的常见处理需求。顺带说价格。直播间或促销价格经常需要强制显示两位小数JS 的方法是value.toFixed(2)它返回字符串0也会补成0.00。使用时要确认value是数字类型如果是从接口拿到的字符串先Number(value)再toFixed避免得到字符串拼接结果。4.3 tab 切换用事件委托别给每个按钮单独监听京东首页官网的推荐/新品/排行这类切换是 tab 组件的典型形态。新手写法是给每个按钮单独绑定click小而能跑但新增一个 tab 就要多写一段绑定代码。事件委托做法的好处是只需在父容器上监听一次通过event.target判断点到了谁。const tab document.querySelector(.tab); tab.addEventListener(click, function (e) { if (!e.target.classList.contains(tab-item)) return; [...this.querySelectorAll(.tab-item)].forEach((item) { item.classList.remove(active); }); e.target.classList.add(active); const index [...this.children].indexOf(e.target); document.querySelectorAll(.tab-panel).forEach((panel, i) { panel.style.display i index ? block : none; }); });第一行if是事件委托的守门员只有点击对象带有tab-item类时才继续执行否则直接返回。[...this.children]把类数组转成真数组才能使用indexOf拿到点击按钮的序号。这里的index就是理论先立住的部分——按钮和内容面板通过索引对齐而不是各自绑一个固定编号新增内容时逻辑不用改。4.4 一键返回顶部算法用 requestAnimationFrame 做减速滚动一键返回顶部算法在网页制作里是高频需求。最简单的方式是window.scrollTo(0, 0)瞬间跳回体感生硬更好的是带缓动效果的减速滚动让页面快速上移然后逐渐停下。实现上requestAnimationFrame比setInterval更合适它会跟随屏幕刷新率执行而且页面切到后台时自动暂停不会浪费计算资源。const backTop document.querySelector(.back-top); window.addEventListener(scroll, () { backTop.style.display window.scrollY 400 ? block : none; }); backTop.addEventListener(click, () { const start window.scrollY; const duration 300; const startTime performance.now(); function step(now) { const progress Math.min(1, (now - startTime) / duration); const ease 1 - Math.pow(1 - progress, 3); window.scrollTo(0, start * (1 - ease)); if (progress 1) requestAnimationFrame(step); } requestAnimationFrame(step); });duration 300表示整个滚动过程 300msprogress从 0 到 1代表已经经过的时间比例ease是缓动后的进度1 - Math.pow(1 - progress, 3)是常见的 ease-out 曲线起步快、收尾慢比线性滚动更有被推上去慢慢停住的手感。Math.min(1, ...)可以防止progress超过 1避免最后一次滚动超出顶部产生回弹。参数含义调整方向duration滚动总时长值越大滚动越慢建议 200-500ease公式缓动曲线幂次越大收尾越慢start起始滚动位置一般取window.scrollY另一种做法是纯 CSS 的scroll-behavior: smooth一行搞定但期末作业要求展示 JS 能力时显式写这个算法更能体现对浏览器渲染机制的理解。注意window.scrollTo的第一个参数固定为0否则滚动结束后会停在横向偏移位置。4.5 交互写完的统一检查点JS 写完先开控制台看有没有红色报错最常见的三个querySelector返回null说明选择器拼错或 JS 放在了 HTML 结构之前items.length为 0 说明.slider-track里没有子元素addEventListener的 this 指向混乱说明事件绑定时机不对。页面尺寸变了之后轮播位移如果用固定itemWidth记得同步验证图片宽度。返回顶部按钮显示逻辑里的400这个阈值可以按自己页面导航栏高度调整没有固定标准。5. UI 还原度最高的三个盲区截图对比、溢出扫描与断网演练5.1 透明度叠图法找间距偏差浏览器里手工比对还原度最可靠的方法是叠图对比。打开真实的京东首页官网整页截图再把自己的页面整页截图。两张图放进图片编辑器各占一个图层上面一层混合模式改为差值或把不透明度降到 40%-50%然后拖动对齐。两者完全重合的地方显示为灰色或深色偏差大的区域会出现明显的亮色边缘或重影。这个方法比肉眼来回切换两个窗口高效得多尤其适合检查导航栏高度、模块间距、页脚列宽这类看着差不多但总差一点的位置。逐屏滚动检查时建议每屏截一张不要指望一张全页截图能看出所有问题因为长页面在压缩后细节会丢失。5.2 一条 console 命令扫出横向溢出元素页面出现横向滚动条是还原度的大扣分项。原因通常是某个元素宽度超出了容器或者绝对定位写负值导致元素被推出屏幕。不需要逐个检查元素直接在浏览器控制台粘贴一段脚本所有超出视口宽度的元素会当场被标记出来。document.querySelectorAll(*).forEach((el) { const rect el.getBoundingClientRect(); if (rect.right document.documentElement.clientWidth) { console.log(el.tagName, el.className, rect.right); } });这段代码遍历所有元素用getBoundingClientRect().right取元素的右边界坐标与视口宽度比较。控制台会输出所有超出的元素标签、类名和右边界值按值从大到小排查最大那个通常是罪魁祸首。固定宽度布局中如果容器是 1210px 而浏览器窗口只有 1024px溢出是正常的所以检查时先把浏览器窗口拉宽到容器宽度以上再执行这段脚本。5.3 断网、小屏与演示机把还原度变成答辩素材写完页面后的最后一遍检查建议做三件事。第一件是断网刷新把script标签里的 CDN 地址或字体链接临时删掉看看页面是不是靠本地资源和内联样式就能正常渲染避免答辩教室没网时页面直接裸奔。第二件是缩小浏览器窗口到 1024px 和 1366px 各看一眼1280px 以上时固定宽度布局应该没有横向滚动1000px 以下出现滚动条是正常现象但要知道临界点是多少能在答辩时明确说出这个布局适配的是 1210px 固定宽度小屏会有横向滚动。第三件是找到答辩要用的那台机器提前用它的 Chrome 打开一遍确认字体、缩放比例和系统默认样式没有把页面带偏。这三件事做完被问到你怎么保证还原度时你至少有三个能独立验证的动作可以讲截图叠图比对过间距控制台脚本扫过横向溢出断网状态下跑过完整页面。本文还有配套的精品资源点击获取