简介这份期末作业成品以HTMLCSS复刻星巴克咖啡品牌风格面向需要完成静态网页设计课程考核的大学生也适合前端入门者对照学习。压缩包共22个文件整体大小4.21MB包含15张png格式的页面图片、3个css样式表、2个ico图标以及主入口html和说明文档。项目采用divcss布局页面覆盖导航栏、横幅区、产品展示、页脚等常用模块配色与视觉元素贴近星巴克门店调性风格统一完整。描述中强调95分以上必过下载后无需修改即可运行说明其完成度与细节处理已达到较高标准同时文件命名清晰目录结构简洁便于小白在浏览器中直接预览效果或删改局部样式做个性化调整。已有2560人学习下载在同类期末作业中具备一定参考热度。无论需要直接提交还是想从成品中拆解网页结构这份资源都能派上用场。1. 一份能直接交差的星巴克静态页面到底拆开看是什么拿到这个期末作业压缩包时你大概率以为它就是个“打开 index.html 就能看”的完整体。真正解压后你会发现它是一套由 HTML、CSS、JavaScript 和几十个图片资源组成的完整静态站点工程。这里面的门道是它不是靠一张大图撑起来的而是用多个 CSS 文件分层控制样式用重置样式解决不同浏览器的基础差异再用少量 JS 完成图片切换、导航交互这类“加分动作”。对要做期末作业的大二学生来说这份代码的价值在于能完整体现你对页面结构、选择器优先级、盒模型、浮动与定位的掌握程度。评阅老师最看重的三个点——路径是否有效、布局是否跨屏不乱、交互是否有反馈——恰恰是这套资源处理得最到位的地方。下面我会按文件拆包、核心样式、脚本触发、验收清单的顺序把这套静态网页设计的每个角落都讲透。2. 从 ZIP 到页面Starbucks 静态项目的目录结构与重置样式策略2.1 解压后的文件清单里藏着评分点静态网页设计期末作业最容易丢分的不是你的动画炫不炫而是文件组织乱不乱。这个压缩包的文件结构非常典型我先拆开来看每个文件的角色。文件/目录类型作用index.htmlHTML唯一入口页面承载全部内容结构style.cssCSS主样式表控制页面整体布局和样式style10.cssCSS样式覆盖文件通常用于局部模块或第二套配色reset.cssCSS浏览器样式重置解决默认边距不一致script.jsJavaScript交互逻辑图片切换、返回顶部等image.png / img1.png / img2.png / img3.png图片主视觉、产品图、背景图thumb1.png / thumb2.png / thumb3.png图片缩略图常配合 JS 做点击切换logo-cafe.png / ggimage.png图片品牌 Logo 与装饰图1.ico / logoico.ico图标浏览器地址栏 favicon 图标README.md文档项目说明一般含运行方式和文件介绍facebook.png / twitter.png / instagram.png图片底部社交图标这份文件清单本身就是答辩时的加分项。很多同学把所有图片塞在一个文件夹里命名也没有规则这里的图片用img1、thumb3这种序列命名配合logo-cafe这种语义化命名让 CSS 写起来非常顺手。更重要的是它把重置样式、主样式、覆盖样式拆成三个文件这正是你答辨时能说清楚的设计决策。2.2 reset.css 不是多余的它先抹平浏览器差异浏览器默认会给body加margin: 8px给ul加padding-left给图片留白。同样是星巴克页面Chrome 和 Edge 显示出来的距离可能差十几个像素。期末答辩现场老师如果用的是教室电脑的 IE 模式你的页面就可能“散架”。reset.css 存在的意义就是把这些默认值归零让所有浏览器从同一个起点开始计算。常见的 reset.css 核心代码像这样/* reset.css - 抹平浏览器默认样式 */ * { 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%; } button { border: none; background: none; cursor: pointer; }这里有两个容易被忽略的关键点。第一box-sizing: border-box非常关键它让padding和border不再撑大元素的实际宽度写响应式布局时不用反复计算width和padding的抵消关系。第二img { max-width: 100% }防止大图把容器撑破这是评阅时最容易暴露的问题——一旦你有一张原始尺寸很大的图片缩窄浏览器窗口时没有这行代码就会出现横向滚动条十分扣分。2.3 style.css 与 style10.css 的分工一份页面多套皮肤同一个项目里出现两个并非重复的 CSS 文件很多新手会以为只是命名习惯不同其实这是刻意的分层设计。常见的做法是style.css负责整体骨架与基础模块包括顶栏、导航、卡片、页脚style10.css则只覆盖局部样式可能是某个小组件的皮肤、某个专题区域的颜色或者是为了应付“期末作业要求多次修改设计”而独立出来的变更层。在index.html的head里引入顺序是这样的link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css link relstylesheet hrefcss/style10.css这段代码解释了 CSS 层叠规则的本质同优先级下后加载的样式覆盖先加载的样式。reset.css最先加载负责清空默认值style.css建立基础布局style10.css最后加载用来做细节修正。如果你想把自己的作业改成别的咖啡品牌只需要在style10.css里覆盖主色变量而不需要动style.css的全部内容。这种文件划分在答辩时会被问到“为什么这样分”你就能直接回答是为了降低模块耦合方便二次修改。3. 咖啡页面的核心 CSS 实战页面布局、顶部导航与卡片模块3.1 用 Flex 还是 Float 选型期末页面里 Flex 是更好的“答辩理由”早期的静态网页作业普遍用float做导航和卡片布局但float有个明显的问题父容器需要额外写clearfix来清除浮动否则后续元素会顶上来。这个包里的导航栏和商品卡片用的是 Flex 布局原因很简单Flex 的一维排列特性比浮动更符合导航栏的“一行横排”场景代码量也更少。看这个简化过的导航栏样式/* 顶部导航栏logo 居左, 菜单居右 */ .navbar { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 40px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); position: sticky; top: 0; z-index: 999; } .navbar-logo img { height: 40px; width: auto; } .navbar-menu { display: flex; gap: 24px; }这里的justify-content: space-between让 logo 和菜单自动分居两端gap统一控制菜单项间距完全不需要给每一项单独写margin。position: sticky配合top: 0是近两年静态网页设计里的高频写法它让导航栏在滚动时“吸”在顶部而且不像fixed那样脱离文档流。注意sticky的生效条件是父容器不能有overflow: hidden很多同学在这里踩坑导航吸顶不了检查一下父级是否有overflow设置。3.2 品牌色与背景的落地星巴克绿不是随手选的星巴克视觉识别里最有记忆点的就是那条墨绿色。这个项目的配色以#00704A为中心搭配浅色背景和白色卡片。做成 CSS 时我一般会把这个颜色提取成变量方便统一替换和整数取值。:root { --cafe-green: #00704A; --cafe-light: #F7F5F0; --cafe-gold: #C9A063; --text-dark: #2A2A2A; --text-light: #6B6B6B; }定义好变量后后面所有颜色都从变量里取。style10.css如果想做一版“圣诞红色星巴克”只需要重写这些变量:root { --cafe-green: #B3261E; --cafe-gold: #D4AF37; }变量机制在期末作业里很容易给老师留下“你懂设计工程化”的印象。需要注意:root变量必须写在正确的块里不能嵌套在选择器内部否则全局无法使用。另外如果连带背景图的主色帽也是绿色可以在 hero 区域设计一个半透明渐变色盖在背景图上比如background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(img/image.png) center/cover这样图片上的白色文字在任何情况下都可读。3.3 导航栏 hover 状态与下划线动画静态网页设计里的“鼠标移入事件”并不一定要 JS纯 CSS 的:hover伪类就能完成。这里用到的是导航链接底部滑入的下划线效果这也是视觉上很加分的一个细节。.navbar-menu a { position: relative; padding: 6px 2px; color: var(--text-dark); font-weight: 500; transition: color 0.25s ease; } /* 伪元素实现下划线初始宽度为0 */ .navbar-menu a::after { content: ; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--cafe-green); transition: width 0.3s ease-in-out; } /* 鼠标移入时下划线展开 */ .navbar-menu a:hover { color: var(--cafe-green); } .navbar-menu a:hover::after { width: 100%; }这里用了::after伪元素而不是直接给a加下边框原因是动画方向可控。width从 0 到 100% 是从左往右展开如果要中间展开就改用transform: scaleX(0)到scaleX(1)。transition里的ease-in-out让动画在起止时都平滑。老师如果问“鼠标移入事件怎么做的”你答“用伪类选择器配合过渡动画”比答“用 mouseover”更像懂 CSS 的人因为纯 CSS 方式性能和可维护性都更好。3.4 商品卡片的悬浮放缩与网格排列产品展示模块通常用四张卡片组成网格每张卡片包括图片、名称、描述和价格。这里的布局用的display: grid配合grid-template-columns实现自动均分宽度比手写百分比更简洁.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 60px 40px; } .product-card { background: #fff; border-radius: 12px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.05)); overflow: hidden; transition: transform 0.3s ease, filter 0.3s ease; } .product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .product-card:hover { transform: translateY(-6px); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.1)); }重点说两个参数。aspect-ratio: 1 / 1强制图片区域保持正方形不管源头图是横版还是竖版都会被object-fit: cover裁剪成正方形这样四张卡片高度完全一致。transform: translateY(-6px)是悬浮上浮效果而不是直接修改margin-top因为 transform 不会触发重排性能上更好。如果你在项目里看到.product-card:hover里还带着box-shadow变化这也是常见的做法但注意别把filter和box-shadow混在一起写否则会有性能问题。4. 两套样式表的配合style10.css 与交互脚本的触发逻辑4.1 为什么需要 JSCSS 无法独立完成的交互有了 CSS 的:hover很多交互已经能做到。但静态网页里有一些“状态必须保存并影响另一处”的交互比如点击小图切换大图、点击按钮返回顶部、点击菜单展开下拉列表。这种跨元素的“联动”必须依靠 JavaScript。这个项目里的 thumb1、thumb2、thumb3 三张缩略图配合对应的大图展示区就是典型的 JS 交互场景。style10.css在这里承担的是“选中态”样式。比如当某张缩略图被选中时给它加一个绿色边框这个状态不能在 HTML 里写死而是通过 JS 动态加 class。4.2 鼠标移入移出与点击切换album 组件的完整实现下面是一个最常见的“点击缩略图切换主图”逻辑我以这个项目的图片命名为例看整段代码怎么配合// script.js - 缩略图切换主图 const thumbs document.querySelectorAll(.thumb-item); const mainImage document.getElementById(main-coffee-img); function switchImage(event) { const thumb event.currentTarget; // 用>/* style10.css - 缩略图选中高亮覆盖 */ .thumb-item { width: 80px; height: 80px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; overflow: hidden; } .thumb-item.active, .thumb-item:hover { border-color: var(--cafe-green); }这里有几个参数说明。event.currentTarget和event.target有区别currentTarget始终指向绑定了事件的缩略图而target有可能是缩略图里的img子元素会导致dataset取不到值。dataset.image对应 HTML 里的>// 返回顶部按钮 - 平滑滚动 const backToTopBtn document.getElementById(back-to-top); backToTopBtn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); }); // 滚动超过 300px 才显示按钮 window.addEventListener(scroll, function () { if (window.scrollY 300) { backToTopBtn.classList.add(show); } else { backToTopBtn.classList.remove(show); } });window.scrollTo是浏览器原生 APIbehavior: smooth让滚动过程丝滑这个参数在 Chrome 和 Edge 上都支持。window.scrollY是当前滚动距离配合之前写在style.css里的.back-to-top { display: none }再用.back-to-top.show { display: block }控制显示隐藏。这里要注意scroll事件在滚动过程中会高频触发如果需要更严谨的性能处理可以加一个requestAnimationFrame做节流不过在期末作业页面里直接监听完全没问题。4.4 脚本放置位置与脚本执行时机HTML 页面加载是从上往下的如果把script放在head里浏览器会在加载完 JS 后才开始渲染后面的 HTML导致页面白屏几秒。这个项目的index.html末尾应该有类似这样的结构!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css link relstylesheet hrefcss/style10.css /head body !-- 页面内容 -- script srcjs/script.js/script /body /html脚本放在/body之前的原理是此时 DOM 树已经构建完成document.querySelector一定能找到对应的元素。另一种写法是在head里加script defer srcjs/script.js/scriptdefer会延迟到页面解析完再执行但某些老版本浏览器兼容性不好。期末作业建议直接放 body 底部简单可靠。5. 交作业前必查的验证清单浏览器兼容性、图片路径与评分点5.1 用本地服务器预览避免 file 协议下的路径问题双击index.html虽然能打开页面但浏览器会以file://协议运行这时图片、CSS、JS 的加载路径是“绝对本地路径”偶尔会出现图片不显示或 JS 不执行的情况。更稳妥的验证方式是起一个本地 HTTP 服务。Windows 下在项目根目录打开命令行执行python -m http.server 8080然后浏览器访问http://localhost:8080。这样页面通过http://协议加载所有相对路径都按服务器规则解析浏览器行为更接近真实部署。Mac 上也可以用php -S localhost:8080。如果你本机完全没装 Python用 VS Code 的 Live Server 插件右键刷新也能达到同样效果。交作业前一定要用本地服务器预览一遍否则老师那边如果直接解压双击运行碰上路径问题会非常影响评分。5.2 检查页面结构的三个核心点快速目检时用浏览器开发者工具F12逐个确认这几个项检查项工具位置标准控制台报错Console 面板无红色 error黄色 warning 尽量少图片是否 404Network 面板所有 PNG/JPG/ICO 状态码为 200响应式是否正常Elements 面板 窗口缩放窗口宽度从 1440 缩到 320 无横向滚动条导航是否吸顶滚动页面导航栏始终在顶部且不闪跳选中态是否生效点击缩略图主图变化且高亮边框出现如果 Console 里出现Uncaught TypeError: Cannot read properties of null大概率是document.getElementById的 id 名和 HTML 里实际 id 不一致先检查大小写。图片 404 时看 Network 里 Request URL 的路径排查是相对路径少了一级目录还是img写成了image。5.3 如何快速改成自己的主题色很多同学想把这个星巴克页面改成自己的主题店铺而不留抄袭痕迹。核心思路就是改:root变量和替换 Logo。比如改成“瑞幸蓝”保留样式结构只替换以下内容:root { --cafe-green: #0D2E6E; --cafe-gold: #A7833D; --cafe-light: #F4F6FB; }同时把logo-cafe.png换成自己的 logo把页脚的 facebook、twitter、instagram 图标换成对应的校园平台或随意删掉。替换时记得图片文件名尽量保持原名字或同步修改 HTML 里的src避免漏改。此时再回去看 README.md你会发现原作者已经预留了这些变量定义这就是分层设计带来的改造成本优势。5.4 加分技巧给当前菜单加“当前页高亮”最后一个建议在导航栏里写死active类的做法在单页面里是真可行的因为你不做多页面跳转。但如果老师看重“可扩展性”可以写一段 3 行的 JS 来自动高亮点击过的菜单项const navLinks document.querySelectorAll(.navbar-menu a); navLinks.forEach(function (link) { link.addEventListener(click, function () { navLinks.forEach(function (item) { item.classList.remove(active); }); this.classList.add(active); }); });然后确保style10.css里有对应的.active样式比如把字色改成var(--cafe-green)并加粗。这样星巴克静态页面在你手里就有了反馈闭环用户点击哪里哪里就亮起。把这个细节写进期末作业的答辩说明里比单纯写“我做了一个页面”有用得多。本文还有配套的精品资源点击获取