简介：面向网页设计课程作业场景，这份基于超文本标记语言（HTML）与层叠样式表（CSS）实现的星巴克咖啡网站主页源代码，适合计算机或设计专业学生作为大作业参考，也可用于练习静态网页的布局与样式设计，覆盖导航栏布局、品牌配色、图文混排以及响应式适配等常见知识点。压缩包内共十七个文件，大小五点二四兆，包含五个网页结构页面、两个样式控制表、七个动效图片、一个演示视频，以及说明文档与授权文件；结构页面负责语义组织，样式表控制视觉风格，动效图片增强页面表现，演示视频直观展示站点运行效果。目前已有四十一人学习下载。读者拿到这套源码后，可在浏览器中直接运行并修改样式，对照学习常用布局技巧与细节写法，也能基于现有模块快速改造出属于自己的课程设计，形成可复用的静态网站范本。整体目录结构清晰，适合按文件逐模块拆解、边看边练。
1. 网页设计大作业里的星巴克主页，考的不是照抄源码而是切图思路
很多人搜“网页设计大作业基于html+css实现的星巴克咖啡网站主页源代码”，本意是找一份能直接交差的代码。但一份源代码交上去，老师大概率会现场打开浏览器，指着导航、Banner、饮品卡片和页脚问“这块用什么标签写的”“为什么用 Flex 而不是浮动”，答不上来反而比没交还难看。这里不准备把某份现成源码原样搬出来，而是把一套最常见、能复现的 HTML+CSS 主页方案拆开讲清楚：从语义化骨架到 CSS 布局，再到纯 CSS 交互和交作业前的验证。每段都可以直接抄进自己的网页设计大作业里。适合两类人：一是在赶网页设计作业选题的学生，二是想用静态页面练手布局的初学者。
2. 基于 HTML 的星巴克主页骨架：从分区到语义化标签
2.1 先用大作业评审点反推页面分区
大部分《网页设计与制作》或《web网页设计》课程的评分表里，主页都会考察四个固定模块：导航栏、宣传区、内容展示区、页脚。星巴克主页适合作业，是因为它既不需要数据库，也不需要后台，单靠 HTML 和 CSS 就能呈现一个完整品牌页面的视觉层级。
我一般会把页面先切成分区图，再落成代码：
| 页面分区 | 推荐 HTML 标签 | 具体内容 | 后续 CSS 重点 |
|---|---|---|---|
| 页面头部 | header+nav | Logo、主导航列表 | 横排导航、吸顶、间距 |
| 宣传区 | section id="hero" | 标题、一句话文案、按钮 | 全屏背景、垂直居中 |
| 内容展示 | section+article | 饮品卡片、门店介绍 | Grid 分列、卡片阴影 |
| 页脚 | footer | 联系信息、版权声明 | 多列布局、背景色 |
项目目录也要跟着结构走，不然源代码交给别人后很容易打开空白页。常见做法是这样组织：
starbucks-homework/ ├── index.html ├── css/ │ └── style.css └── images/ ├── logo.png ├── hero-bg.jpg ├── latte.jpg ├── mocha.jpg └── coldbrew.jpg目录里最容易被忽略的是 CSS 文件路径。如果index.html和css/style.css不在同一层，就要写成css/style.css；图片如果在images/下，HTML 里统一写images/xxx.jpg，CSS 背景图则要看 CSS 文件位置，比如url("../images/hero-bg.jpg")。后面会专门说这个相对路径的坑。
2.2 头部导航区用 header + nav，别让 div 铺满全屏
很多初版作业里经常看到“div 套 div”，找半天不知道哪块是导航。导航必须用语义标签，既是 HTML5 网页设计作业的得分点，也让 CSS 选择器更好写。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>星巴克咖啡网站主页 - 网页设计大作业</title> <meta name="description" content="基于HTML和CSS实现的星巴克风格主页源代码"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <nav class="nav-container"> <div class="logo"> <!-- 作业里不直接使用官方Logo，可以用自制文字Logo代替 --> <img src="images/logo.png" alt="星巴克风格咖啡店Logo"> </div> <ul class="nav-list"> <li><a href="#hero" class="nav-link">首页</a></li> <li><a href="#menu" class="nav-link">热门饮品</a></li> <li><a href="#story" class="nav-link">门店故事</a></li> <li><a href="#footer" class="nav-link">联系我</a></li> </ul> </nav> </header>这里有四个细节需要解释清楚：
第一，lang="zh-cn"必须和页面语言一致，否则浏览器翻译和中文排版都可能异常。第二，meta viewport是移动端适配的基础，没有这一行，后面的媒体查询在小屏幕下会直接失效。第三，导航没有用div，而是用ul > li > a，这样即使 CSS 加载失败，页面上仍然能看到一组有序的链接。第四，锚点链接href="#menu"对应后续 section 的id，配合 CSS 的scroll-behavior: smooth就能做出“点击导航平滑滚动”的效果，不加 JavaScript 也能实现。
2.3 main 里放三个 section：Hero、饮品卡片和品牌故事
主体内容建议全部包在main里。一个页面只允许一个main，这是 HTML5 的语义规范，也是网页设计大作业里比较容易拿分的点。
<main> <section id="hero" class="hero"> <h1>欢迎来到星巴克风格咖啡主页</h1> <p>用 HTML 与 CSS 还原的静态网页设计大作业</p> <a href="#menu" class="btn-primary">查看热门咖啡</a> </section> <section id="menu" class="menu-section"> <h2>人气饮品</h2> <div class="menu-grid"> <article class="menu-card"> <img src="images/latte.jpg" alt="拿铁咖啡"> <h3>拿铁</h3> <p>浓缩咖啡与牛奶的经典组合</p> </article> <article class="menu-card"> <img src="images/mocha.jpg" alt="摩卡咖啡"> <h3>摩卡</h3> <p>巧克力酱与奶泡的层次感</p> </article> <article class="menu-card"> <img src="images/coldbrew.jpg" alt="冷萃咖啡"> <h3>冷萃</h3> <p>低温慢萃带来的柔和口感</p> </article> </div> </section> <section id="story" class="story-section"> <h2>门店故事</h2> <p>这里可以放一段关于咖啡豆产地、店铺空间设计或品牌理念的文字。</p> </section> </main>页面里h1只保留一个，放在 Hero 区，帮助搜索引擎和阅读器更快识别主题。h2是每个区块的小标题，饮品卡里的标题用h3。article表示一个独立完整的内容块，即使把一张卡片单独拿走，它也能被理解，所以比每个卡片都写div更合适。
2.4 footer 不只是一行版权
页脚在网页设计大作业的评分表里占不了太多分，但做得好能让整页完成度明显提升。建议至少分成左右两列，一列放关于信息，一列放联系方式，底部再放版权。
<footer id="footer" class="site-footer"> <div class="footer-columns"> <div class="footer-col"> <h3>关于主页</h3> <p>本页面为网页设计大作业演示，仅用于学习 HTML 与 CSS 布局。</p> </div> <div class="footer-col"> <h3>联系</h3> <p>某市某路 100 号</p> <p>lesson@example.com</p> </div> </div> <p class="copyright">© 2025 学习用途，非官方星巴克页面</p> </footer>这段结构里要注意：footer放在body的最后，不要塞进main里；footer里的h3字号应该由 CSS 控制，而不是直接靠 HTML 里的层级去占地。这样写完之后，HTML 部分已经具备完整的“源代码”形态，接下来所有样式和布局都交给 CSS 去处理。
3. CSS 还原星巴克主页：变量、Flex、Grid 和媒体查询一起用
3.1 用 CSS 变量统一品牌色，再做基础重置
网页设计美化 skill 不是靠堆滤镜和渐变，而是先有一套统一的颜色体系。星巴克视觉里最常出现的几个颜色是绿色#006241、浅绿#D4E9E2、深墨绿#1E3932、辅助金色#C7A252。每次写样式都要复制一遍颜色很累，定义成 CSS 变量后，改一处全站生效。
/* css/style.css */ :root { --sb-green: #006241; --sb-light: #d4e9e2; --sb-dark: #1e3932; --sb-accent: #c7a252; --text-dark: #2b2b2b; --font-main: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); color: var(--text-dark); line-height: 1.6; background: #fff; }注意* { box-sizing: border-box; }这行：它让元素的width把padding和border都算进去。布局宽度估算时不用再把内边距反复加一遍，对新手特别友好。html { scroll-behavior: smooth; }是纯 CSS 实现的锚点平滑滚动，不是 JavaScript，写在 HTML 大作业里完全合理。
CSS 变量不一定要叫--green-1这种没有含义的名字，直接叫--sb-dark或--sb-accent，答辩时解释起来也更直观。老师问“这是什么”，可以直接说“这就是星巴克主页里那组深绿色，定义成变量后方便复用”。
3.2 导航栏用 Flex 横排，再写 sticky 吸顶
导航栏是最能体现 Flexbox 优势的位置。左右结构很简单：Logo 放左侧，导航列表放右侧，中间用justify-content: space-between推开。
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .logo img { height: 48px; width: auto; display: block; } .nav-list { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; } .nav-link { display: inline-block; padding: 14px 2px; color: var(--sb-dark); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .nav-link:hover { color: var(--sb-green); border-bottom-color: var(--sb-green); }gap代替margin是现在更推荐的做法，不会给第一个或最后一个列表项多加外边距。flex-wrap: wrap保证窗口变窄时导航能折行，而不是溢出屏幕。position: sticky比fixed更聪明，它只在导航到达顶部时吸住，不会遮掉上方内容，但使用时父容器不能设overflow: hidden，否则粘性定位会失效。
3.3 Hero 区用 Grid 的 place-items 做垂直居中
很多作业里的 Hero 还在用padding-top: 200px来“顶”出垂直居中效果，窗口一变就露馅。更稳妥的做法是用 Grid 的place-items: center。
.hero { min-height: 75vh; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(rgba(30, 57, 50, 0.65), rgba(30, 57, 50, 0.65)), url("../images/hero-bg.jpg") center / cover no-repeat; padding: 40px 20px; } .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 12px; } .hero p { font-size: 1.1rem; margin-bottom: 24px; opacity: 0.95; } .btn-primary { display: inline-block; padding: 12px 32px; border-radius: 40px; background: var(--sb-green); color: #fff; text-decoration: none; font-weight: 600; transition: background-color 0.25s ease, transform 0.25s ease; } .btn-primary:hover { background: var(--sb-dark); transform: translateY(-2px); }这里最重要的不是display: grid，而是min-height: 75vh。vh单位会跟随浏览器可视区高度变化，手机横屏、竖屏、桌面窗口拉大拉小，高度都能保持比例。背景里的两层写法要注意顺序：linear-gradient(...)写在url(...)前面，渐变层才能盖在图片上方；反过来会显示原图没有暗色蒙版，白色文字很容易看不清楚。
clamp(2rem, 5vw, 3.5rem)是响应式字号的简洁写法，表示最小 2rem、理想 5vw、最大 3.5rem。网页设计大作业里出现这一个函数，通常比写三个媒体查询更让老师眼前一亮。
3.4 饮品卡片用 Grid 三列，再用媒体查询控制小屏
饮品卡片区域是“等宽等距多列”的典型场景，Grid 比 Flex 更适合。
.menu-section { max-width: 1200px; margin: 0 auto; padding: 80px 20px 60px; } .menu-section h2 { text-align: center; font-size: 2rem; color: var(--sb-dark); margin-bottom: 40px; } .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .menu-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .menu-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .menu-card h3 { padding: 16px 16px 4px; font-size: 1.25rem; } .menu-card p { padding: 0 16px 20px; color: #666; font-size: 0.95rem; }repeat(3, 1fr)就是把可用空间分成三等份。千万别写成33.33%，因为 Grid 还有gap: 24px，百分比宽度加上间距之后会溢出换行。1fr会自动计算剩余空间，无论屏幕上有没有滚动条都排得下三列。
小屏幕适配继续用媒体查询，不过断点不要乱设，常见做法是 768px 和 480px 两个档：
@media (max-width: 768px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .menu-grid { grid-template-columns: 1fr; } .nav-container { flex-direction: column; } .hero h1 { font-size: 1.8rem; } }Flex 和 Grid 的分工可以这样记：
| 场景 | 推荐工具 | 原因 |
|---|---|---|
| 导航一条横排 | Flexbox | 元素少，宽度由内容决定 |
| 饮品卡片三列等宽 | Grid | 列宽、行距可控 |
| Hero 垂直居中 | Gridplace-items | 两行搞定，不用算 margin |
| 页脚多列布局 | Flexbox 或 Grid 都行 | 列数固定，弹性要求不高 |
到这里，页面的静态形态已经完整：绿色导航、全屏 Hero、三列卡片、响应式断点。接下来要让大作业看起来有交互感，但又不引入 JavaScript。
4. 纯 CSS 让主页“动”起来，源代码里最值得讲的交互细节
4.1 hover 过渡是“网页设计美化”里最稳的加分项
CSS 里没有鼠标事件，但用:hover可以模拟出类似交互。很多 HTML 网页制作教程会把transition写在元素默认状态里，hover 状态只写最终效果，顺序不能反。
.btn-primary { display: inline-block; padding: 12px 32px; border-radius: 40px; background: var(--sb-green); color: #fff; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .btn-primary:hover { background: var(--sb-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 98, 65, 0.35); } .menu-card { transition: box-shadow 0.35s ease; } .menu-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15); } .menu-card:hover img { transform: scale(1.04); } .menu-card img { transition: transform 0.5s ease; }这里有一个新手常见的坏习惯：transition: all 0.5s ease。all会让背景色、外边距、边框、阴影全部参与过渡，页面看起来“糊”且性能差。更好的写法是明确列出需要过渡的属性，比如transition: background-color 0.3s ease, transform 0.3s ease。
卡片图片的缩放也要控制范围。scale(1.04)是普通浏览速度下刚好能注意到的程度，scale(1.2)就显得很山寨。图片要配合overflow: hidden放在.menu-card上，否则图片放大后会顶破卡片边框。
4.2 纯 CSS 轮播：radio hack 让源代码更像“完整网站”
有些大作业要求主页必须有轮播图。传统做法是引入 JavaScript 或 jQuery，但如果课程只教了 HTML+CSS，完全可以用 radio hack 实现一个可点击切换的纯 CSS 轮播。
先写 HTML 结构，注意三个input必须放在.slider容器的最前面，并且不能包在别的元素里：
<section class="slider" id="slider"> <input type="radio" name="slide" id="slide-1" checked> <input type="radio" name="slide" id="slide-2"> <input type="radio" name="slide" id="slide-3"> <div class="slides"> <div class="slide" style="background-image: url('images/s1.jpg');"></div> <div class="slide" style="background-image: url('images/s2.jpg');"></div> <div class="slide" style="background-image: url('images/s3.jpg');"></div> </div> <div class="slider-nav"> <label for="slide-1">1</label> <label for="slide-2">2</label> <label for="slide-3">3</label> </div> </section>对应的 CSS 才是关键。.slides是一个宽度 300% 的横向容器，每张.slide占三分之一；选中某个 radio 后，通过兄弟选择器~让.slides整体位移：
.slider { max-width: 1200px; margin: 40px auto; position: relative; overflow: hidden; border-radius: 16px; } .slider input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .slides { display: flex; width: 300%; transition: transform 0.6s ease; } .slide { width: 33.3333%; height: 420px; background-size: cover; background-position: center; } .slider-nav { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .slider-nav label { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); cursor: pointer; text-indent: -9999px; } #slide-1:checked ~ .slides { transform: translateX(0); } #slide-2:checked ~ .slides { transform: translateX(-33.3333%); } #slide-3:checked ~ .slides { transform: translateX(-66.6666%); } #slide-1:checked ~ .slider-nav label[for="slide-1"], #slide-2:checked ~ .slider-nav label[for="slide-2"], #slide-3:checked ~ .slider-nav label[for="slide-3"] { background: var(--sb-green); }transform: translateX(-33.3333%)中的百分比是相对.slides自身宽度计算的。.slides宽度是 300%，位移到自己宽度的三分之一正好是一屏。
提示：radio hack 的硬性条件是
input和.slides、.slider-nav必须是同一个父元素的兄弟节点，否则~选择器选不中目标。如果页面里还有其他input[type="radio"]，用name="slide"同一个组名隔离。
这套代码没有任何 JavaScript，但能从一号图切到三号图，并让指示器圆点高亮。对大作业来说，可解释性比花哨程度更重要。
4.3 类名规范和注释，决定源代码能不能“答辩”
源代码能不能被老师快速看懂，比“页面是否好看”更容易影响分数。我一般用 BEM 风格的简写：块名 + 下划线 + 元素名，修饰状态用--。
| 不推荐的类名 | 推荐的类名 | 原因 |
|---|---|---|
header1 | site-header | 名称表达模块职责 |
left | .nav-list | 布局位置会变，语义不会变 |
green-card | .menu-card--highlight | 颜色是样式，不是结构 |
wrapper2 | .hero-container | 明确对象，而不是笼统容器 |
CSS 文件里也要留注释。注意，不是写“这里是红色”这种废话，而是写清楚“为什么这样写”：
/* 导航吸顶：使用 sticky 而不是 fixed， 避免导航遮挡 Hero 顶部内容 */ .site-header { position: sticky; top: 0; z-index: 100; } /* 卡片图片裁剪：height 固定， object-fit 防止图片被拉伸变形 */ .menu-card img { height: 220px; object-fit: cover; }老师打开源代码时，搜索“为什么 sticky”“object-fit 是什么”的概率很大。与其在答辩时临时查资料，不如提前在注释里写清意图。
注意：BEM 是命名约定，不是课程硬性要求。如果原来已经写了一套类名，不要全盘重写，会造成版面大面积波动；只需把最关键的 header、menu-card、btn-primary 整理清楚即可。
5. 交作业前按这三步验证 HTML+CSS 主页，避免细节扣分
5.1 第一步：用浏览器 F12 检查布局和响应式
写完源代码后不要只在自己的窗口里看，按 F12 打开开发者工具，点设备工具栏图标，把窗口宽度拖到 768px、480px、320px 三档。重点看三处：导航是否折行、饮品卡片是否从三列变两列再变一列、图片有没有溢出。
如果 Hero 背景图在小屏下变成只显示中间一小块，是background-size: cover的正常行为，不需要改；但如果白色文字被按钮遮住，就需要把媒体查询里的.hero内边距加大。这一步能避免绝大多数“换台电脑就乱版”的问题。
5.2 第二步：检查图片路径和字体回退栈
大作业通常要打包交压缩包，别人解压后双击index.html打开。如果图片用的是本地绝对路径如C:/users/...，换电脑必然失效。页面里必须用相对路径：HTML 中写images/latte.jpg，CSS 中写url("../images/hero-bg.jpg")。
字体也是常见失分点。要注意 Windows 和 mac 的字体名称不一样，默认都不认识某些网上教程里的字体。字体栈不要再写sans-serif就结束，加一层中文回退：
body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }老师电脑如果安装了 Microsoft YaHei，就会用微软雅黑；如果 mac 开了苹方，就用 PingFang SC。即使都没有，最后的sans-serif也能保证不乱码。
5.3 第三步：用 object-fit 和 min-height 收尾
很多作业里的图片是被width: 100%; height: 220px强制拉伸的，杯子变矮。解决办法是一行 CSS：
img { object-fit: cover; }object-fit: cover会让图片按比例裁剪填满容器，而不是失真变形。Hero 区同理，不要写height: 700px，改成min-height: 75vh；内容变多时高度会自动撑开，内容少时也能占满首屏。
交作业前最后再点一遍导航里的四个锚点，确认点击后能平滑滚动到对应区块，并且滚动后导航栏仍吸在顶部。把这几个小地方处理完，这份“网页设计大作业基于html+css实现的星巴克咖啡网站主页源代码”就从能打开、能截图，变成了能在不同环境、不同屏幕下稳定展示的完整主页。
本文还有配套的精品资源，点击获取
