简介面向大学生期末作业、Web前端课程实训及K12信息技术拓展的淘宝首页网页设计成品以HTML5结构、CSS3样式为核心并以少量JavaScript实现交互反馈。压缩包仅427KB共17个文件包含index.html页面骨架、index.css统一样式文件以及多张png、jpg、gif图片素材分别用于商品展示、logo与界面装饰。目前已有490位学习者下载使用。资源可直接运行首页分区覆盖顶部导购、主视觉轮播、商品分类推荐与底部信息等电商典型模块CSS负责网格布局与视觉统一JS配合实现轻量互动效果完整呈现淘宝风格的商品陈列逻辑。既适合作为期末作业的参考成品也便于初学者按模块拆解学习电商首页的页面结构与样式组织方法。1. 把淘宝首页当 HTML5 期末作业来做先想明白在练什么历届 Web 前端开发期末大作业里淘宝首页几乎是必练对象。它看起来模块多、颜色杂拆开之后只剩四件事顶部工具条、搜索区、导航与主内容网格。用 HTML5 CSS3 JS 把这几块搭出来等于把一遍网页制作全流程走了个完整闭环——从语义标签到 Flex 布局从 hover 交互到滚动滚动条监听都是企业里真正在用的做法不是作业式静态页。这份代码最适合有一定 html/css 基础、想在月初交一份能演示能讲原理的成品的学生。你不必复制真实购物网站的素材和接口照着“页面结构 样式还原 少量 JS 状态切换”的目标做两周之内就能产出可部署的成品。下面内容按我平时带这种课设的节奏写先拉 HTML 骨架再做 CSS3 视觉层最后用原生 JS 补交互收尾时讲讲提交前必须过的检查和部署方式。2. 用 HTML5 搭出淘宝首页的信息骨架语义结构、Doctype 与区块规划2.1 准备目录结构VSCode 与 HBuilderX 里的 HTML/CSS/JS 配置开始写代码前先把目录建好。一个 Web 前端期末大作业至少要拆成三个目录不要把所有内容堆在一个 index.html 里因为后续的 CSS 文件、图片、脚本都需要相对路径引用这也是评分时会看的组织方式。常见做法是这样拆分taobao-demo/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── img/ ├── banner-1.jpg ├── banner-2.jpg └── goods-*.jpg编辑器随便选。VSCode 下装 Live Server 插件右键 index.html 选 Open with Live Server改代码后浏览器自动刷新效率比手动刷新高一截。如果你在用 HBuilderX不需要装额外插件新建 Web 项目后直接点运行到浏览器即可。关键在于 HTML 文件里要写对 CSS 与 JS 的引入路径link relstylesheet hrefcss/style.css script srcjs/main.js defer/scripthref和src都走相对路径确保整个文件夹拷贝到任意机器上都能直接用浏览器打开。如果写成/css/style.css这种根路径本地双击文件时可能因为协议问题加载失败这也是网页制作成品最常见的问题之一。2.2 写对第一行 HTML5 模板doctype、charset 与 meta viewport打开 index.html第一行必须是!DOCTYPE html。它告诉浏览器按 HTML5 标准渲染页面缺失时浏览器会进入怪异模式盒模型、图片对齐、margin 计算全都会偏掉。接着用html langzh-CN声明页面语言既规范也有利于后续无障碍检查。完整的模板可以这样起步!DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription content淘宝首页前端练习HTML5 CSS3 JS 期末作业 title淘宝首页样式练习/title link relstylesheet hrefcss/style.css script srcjs/main.js defer/script /headmeta charsetutf-8解决中文乱码viewport让移动端浏览器按设备宽度渲染不加它手机上会等比例缩放整个页面description是搜索引擎抓取摘要时读的字段作业里写上内容说明至少看起来是认真做过的。这些标签放在head里用户肉眼看不到却是区分“会写网页”与“会堆标签”的细节分。2.3 按语义标签切分首页区块header、nav、main、aside、footer淘宝首页视觉上分五段顶部工具条、搜索区、主导航、商品内容区、右侧悬浮按钮。期末作品不需要做到像素级一致但语义结构建议保持一致因为答辩时老师会问“为什么用nav而不是div”。我的切分方式如下body div classtopbar div classcontainer topbar__inner span省份/span a href#登录/a /div /div header classsearchbar div classcontainer searchbar__inner h1 classsearchbar__logotaobao/h1 form classsearchbar__form rolesearch input classsearchbar__input typetext placeholder请输入商品关键词 button classsearchbar__btn typesubmit搜索/button /form /div /header nav classmain-nav ul classmain-nav__list lia href#首页/a/li lia href#数码/a/li lia href#服饰/a/li /ul /nav main section classbanner idbanner/section section classgoods-grid aria-label推荐商品/section /main aside classfloat-tools a classback-top href#回到顶部/a /aside footer classfooter p本页面仅用于前端学习/p /footer /body各区块与语义标签的对应关系如下视觉区域用到的标签选择理由顶部工具条div.topbar非独立导航用 div 更克制搜索区header.searchbar页面顶部品牌区header 语义合适主导航nav.main-nav跳转链接集合必选 nav商品主体mainsectionmain 表示主内容区悬浮按钮aside侧边辅助内容不用 main 包裹页脚footer版权信息区语义明确这一段代码里有几个细节值得展开。第一h1在 logo 处出现一次即可不要每个区块都放一个 h1否则文档结构混乱第二商品区里的每张卡片用article标签里面再放h3作为标题这样二级标题与卡片标题层级清晰第三back-top链接的href#只是占位真正的滚动逻辑会在第 4 章用 JS 处理这里先保证无脚本时点击不会跳空。3. CSS3 还原视觉层Flex 布局、hover 交互、卡片省略与动画关键帧3.1 重置样式与 CSS 变量把配色和字号统一收口浏览器默认样式是页面长相偏差的来源。不同浏览器会给body加不同 margin给ul加不同 padding因此第一步是重置。常用做法不是引入庞大的 reset.css而是写三行基础重置再补充列表、图片等局部规则/* css/style.css */ :root { --taobao-orange: #ff5000; --text-main: #333; --text-sub: #999; --bg-gray: #f4f4f4; --radius-card: 8px; --shadow-hover: 0 8px 18px rgba(0, 0, 0, .10); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: PingFang SC, Microsoft YaHei, system-ui, sans-serif; color: var(--text-main); background: var(--bg-gray); } ul { margin: 0; padding: 0; list-style: none; } img { display: block; max-width: 100%; }把颜色、圆角、阴影抽到:root里的自定义属性里后续写 hover、按钮、价格文字时统一引用。好处是改主色调只动一个变量不会出现全站十处#ff5000漏改的情况。box-sizing: border-box让宽高包含 padding 和 border做卡片布局时不必反复计算宽度。3.2 顶部栏与搜索区布局用三行模式把 input 居中顶部工具条与搜索区是典型的水平布局用 Flexbox 最顺手。你要的“input 居中”其实不需要给 input 本身写什么特殊居中属性只要让父容器变成 flex 容器再设置justify-content和align-items就能实现。这里用的就是常说的“三行模式”.searchbar__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1230px; margin: 0 auto; padding: 12px 16px; } .searchbar__form { display: flex; align-items: center; flex: 1; max-width: 620px; margin: 0 24px; } .searchbar__input { flex: 1; height: 38px; padding: 0 12px; border: 2px solid var(--taobao-orange); border-right: none; border-radius: 18px 0 0 18px; outline: none; } .searchbar__btn { height: 38px; padding: 0 20px; border: none; border-radius: 0 18px 18px 0; background: var(--taobao-orange); color: #fff; cursor: pointer; }searchbar__inner用justify-content: space-between把 logo 和右侧栏目推向两端searchbar__form设置flex: 1占据中间剩余空间输入框与按钮放在同一个 flex 容器里输入框设置flex: 1按钮不参与缩放于是 input 自动填满剩余宽度并保持垂直居中。三行式居中的核心就一句话父级display: flex子级align-self或父级align-items: center。这一写法同时覆盖了”css 中怎么把 input 居中”这个具体场景。3.3 商品卡片网格与鼠标移入事件hover 提亮与两行超出省略商品区是首页信息量最大的部分用 Grid 布局可以同时控制列数和行间距。推荐商品的卡片结构建议至少包含图片、标题、价格三部分标题长度不固定因此要做超出省略。.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; max-width: 1230px; margin: 16px auto; padding: 0 16px; } .goods-card { background: #fff; border-radius: var(--radius-card); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .goods-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .goods-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 12px; font-size: 14px; line-height: 1.4; }grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))表示每列最小 190px屏幕宽就多排几列窄就少排几列加减窗口时自动换行这是做电商卡片网格最稳的参数组合。鼠标移入事件用 CSS 的:hover伪类完成translateY(-4px)让卡片轻微上浮配合box-shadow扩散形成“被拿起”的反馈。两行省略的写法许多人背不下来关键是-webkit-line-clamp: 2必须配合display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden三行一起出现少一行都不生效。要注意-webkit-前缀在标准浏览器里依然被广泛支持可以放心用这是 Web 前端开发中常见的兼容性写法。3.4 轮播位和标签的 CSS3 动画transition 与 keyframes 参数首页轮播区域的淡入切换可以完全交给 CSS 类。JS 只负责切换类名视觉过渡由transition完成首次进入页面时的入场动画则由keyframes负责。.banner-item { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; } .banner-item.is-active { opacity: 1; } keyframes slide-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .banner-item.is-active { animation: slide-in .45s ease both; }动画里我加了transform: translateX(30px)让文案或图片在淡入的同时从右侧平移过来比单纯透明度变化更灵动。animation: ... both中的both表示动画执行前应用from状态执行后保持to状态避免动画结束后元素闪回初始位置。3.4.1 避免动画闪烁的参数细节transition与animation同时存在时可能因为box-shadow的渲染开销造成掉帧。给动画元素加一行声明可以减少重绘范围.banner-item { will-change: opacity, transform; }will-change只是性能提示不能滥用。只用在确实会被频繁切换的 banner、吸顶导航这类元素上否则浏览器会额外分配合成层占用内存反而变慢。CSS3 动画做完后这项优化也常被答辩老师追问直接讲“这是提示浏览器提前做合成优化”就够。4. 用原生 JS 补齐首页交互轮播、吸顶导航与一键返回顶部4.1 JS 引入方式与执行时机defer 让 DOM 先就绪script放在head里会阻塞 HTML 解析如果此时 JS 里要查找.bannerDOM 还没生成代码会报错。两个解决办法把script放到body末尾或者给 script 加defer属性。我在第 2 章的模板里写的是script srcjs/main.js defer/scriptdefer让脚本在 HTML 解析完成后、DOMContentLoaded事件触发前执行顺序与文档中出现的顺序一致。期末作业里只需要一个外部 JS 文件用这种引入方式最省心不需要再包裹window.onload。如果用了typemodule写法模块默认延迟执行效果类似但直接用defer更容易向评审老师讲清执行时机。4.2 轮播的最小实现自动播放、指示点与边界判定先给 banner 在 HTML 中铺设基础结构。为了演示语义假设 banner 容器里有若干.banner-item图片层和一组.banner-dot指示点// js/main.js const banner document.getElementById(banner); const slides banner.querySelectorAll(.banner-item); const dots banner.querySelectorAll(.banner-dot); let current 0; let timer null; function showSlide(index) { slides.forEach((slide, i) { slide.classList.toggle(is-active, i index); }); dots.forEach((dot, i) { dot.classList.toggle(is-active, i index); }); current index; } function nextSlide() { const next (current 1) % slides.length; showSlide(next); } function startAutoPlay() { stopAutoPlay(); timer setInterval(nextSlide, 3000); } function stopAutoPlay() { if (timer) { clearInterval(timer); timer null; } } banner.addEventListener(mouseenter, stopAutoPlay); banner.addEventListener(mouseleave, startAutoPlay); startAutoPlay();(current 1) % slides.length是边界判定的核心写法当 current 到达最后一张时加一后对数量取模自动回到 0不需要手写if (current slides.length) current 0。classList.toggle(is-active, i index)的第二个参数是布尔值真则加类假则移除比先remove再add更简洁。鼠标移入暂停、移出恢复的互动细节在演示轮播时能明显增加完成度。4.3 吸顶导航的滚动监听window.scrollY 与 class 切换淘宝首页的导航栏滚过顶部后固定在窗口上边缘这是典型的吸顶交互。实现思路是监听scroll事件当纵向滚动距离大于导航原本到页面顶部的距离时给导航加一个is-fixed类通过 CSS 把它改成position: fixed。const nav document.querySelector(.main-nav); const navTop nav.offsetTop; window.addEventListener(scroll, () { const shouldFix window.scrollY navTop; nav.classList.toggle(is-fixed, shouldFix); }, { passive: true });.main-nav.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }nav.offsetTop是导航元素相对于页面顶部的距离在页面未加载完图片前获取可能偏小因此这个脚本放在defer中执行能拿到完整 DOM但图片高度仍可能变化。更稳妥的方式是在window.load事件里重新计算一次window.addEventListener(load, () { navTop nav.offsetTop; })。吸顶后position: fixed使导航脱离文档流下方内容会突然上移一截。解决方法是给body增加一个与导航等高的padding-top或者在滚动到位的那一瞬间给导航添加固定类时同时给占位元素设高度。为了避免每次滚动都触发布局计算我在监听器上加了{ passive: true }它告诉浏览器不必等待 JS 取消默认滚动行为滚动性能会更好。4.4 一键返回顶部以及搜索栏的 includes 关键词过滤回到顶部按钮在上一章 HTML 里已经埋好现在的任务是让它在滚动超过一定距离后出现点击后平滑滚回顶部。const backTop document.querySelector(.back-top); window.addEventListener(scroll, () { backTop.classList.toggle(is-show, window.scrollY 400); }, { passive: true }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollTo的behavior: smooth是浏览器原生平滑滚动写这一行就完成了“一键返回顶部算法”最常用的实现方式。window.scrollY表示当前视口顶部距文档顶部的像素值阈值选 400 是因为在这个值以下按钮悬浮在页面上会遮住顶部工具条观感不好。如果老师要求兼容很旧的浏览器scrollTo方法同样可用只是没有平滑效果不影响功能评分。搜索栏过滤是纯加分项不必做后端接口用 JS 判断字符串是否包含关键词即可。推荐使用includes方法const searchInput document.querySelector(.searchbar__input); searchInput.addEventListener(input, () { const keyword searchInput.value.trim(); document.querySelectorAll(.goods-card).forEach((card) { const title card.dataset.name || card.textContent; card.hidden keyword.length 0 !title.includes(keyword); }); });card.dataset.name对应商品卡上写的>media (max-width: 768px) { .searchbar__inner { flex-direction: column; } .searchbar__form { margin: 8px 0; max-width: 100%; } .goods-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }期末大作业的移动端要求通常不会太高能做到内容不变形、商品卡片不重叠就可以交差。真正要留意的是横向滚动如果页面在手机模式下能左右拖动说明某个元素宽度超出了100vw打开 Elements 面板逐个检查.float-tools和.banner把固定宽度改成百分比或max-width。5.3 部署成品GitHub Pages 的相对路径与常见扣分点最后把成品部署出去方便老师直接在手机或教室电脑上看。常见做法是推到 GitHub 仓库在 Settings 的 Pages 选项里选择部署分支和根目录几分钟后就能得到一个公网地址。部署前把index.html、css、js、img整个文件夹压成一个 zip解压后双击index.html确认本地双击也能正常显示。这是相对路径的优势整个文件夹移动到任何环境都不会断资源。检查点扣分风险核对方式图片 alt 属性图片异常时体验差搜索img逐个确认有 alt语义标签使用全 div 结构难读检查是否有 nav、main、footer多级标题顺序文档结构混乱确认页面只有一个 h1JS 放在 head 且无 defer报错导致交互失效查看 script 标签属性外链素材写死绝对路径断网后页面没有样式检查 img 与 css 相对路径关于版权还要单独说一句仿写购物网站页面用于课程作业没有问题但不要把真实平台的商标图片、商品照片当自己的素材打包上传公网仓库。商品图用占位图logo 用文字或自制图形替代既满足 HTML5 期末作业的考察要求也能避免不必要的麻烦。部署链接拿到后把地址、GitHub 仓库、本地压缩包三者一起提交这套网页制作成品就算完整了。本文还有配套的精品资源点击获取