简介面向网页设计课程作业场景这份基于超文本标记语言HTML与层叠样式表CSS实现的星巴克咖啡网站主页源代码适合计算机或设计专业学生作为大作业参考也可用于练习静态网页的布局与样式设计覆盖导航栏布局、品牌配色、图文混排以及响应式适配等常见知识点。压缩包内共十七个文件大小五点二四兆包含五个网页结构页面、两个样式控制表、七个动效图片、一个演示视频以及说明文档与授权文件结构页面负责语义组织样式表控制视觉风格动效图片增强页面表现演示视频直观展示站点运行效果。目前已有四十一人学习下载。读者拿到这套源码后可在浏览器中直接运行并修改样式对照学习常用布局技巧与细节写法也能基于现有模块快速改造出属于自己的课程设计形成可复用的静态网站范本。整体目录结构清晰适合按文件逐模块拆解、边看边练。1. 网页设计大作业里的星巴克主页考的不是照抄源码而是切图思路很多人搜“网页设计大作业基于htmlcss实现的星巴克咖啡网站主页源代码”本意是找一份能直接交差的代码。但一份源代码交上去老师大概率会现场打开浏览器指着导航、Banner、饮品卡片和页脚问“这块用什么标签写的”“为什么用 Flex 而不是浮动”答不上来反而比没交还难看。这里不准备把某份现成源码原样搬出来而是把一套最常见、能复现的 HTMLCSS 主页方案拆开讲清楚从语义化骨架到 CSS 布局再到纯 CSS 交互和交作业前的验证。每段都可以直接抄进自己的网页设计大作业里。适合两类人一是在赶网页设计作业选题的学生二是想用静态页面练手布局的初学者。2. 基于 HTML 的星巴克主页骨架从分区到语义化标签2.1 先用大作业评审点反推页面分区大部分《网页设计与制作》或《web网页设计》课程的评分表里主页都会考察四个固定模块导航栏、宣传区、内容展示区、页脚。星巴克主页适合作业是因为它既不需要数据库也不需要后台单靠 HTML 和 CSS 就能呈现一个完整品牌页面的视觉层级。我一般会把页面先切成分区图再落成代码页面分区推荐 HTML 标签具体内容后续 CSS 重点页面头部headernavLogo、主导航列表横排导航、吸顶、间距宣传区section idhero标题、一句话文案、按钮全屏背景、垂直居中内容展示sectionarticle饮品卡片、门店介绍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.jpgCSS 背景图则要看 CSS 文件位置比如url(../images/hero-bg.jpg)。后面会专门说这个相对路径的坑。2.2 头部导航区用 header nav别让 div 铺满全屏很多初版作业里经常看到“div 套 div”找半天不知道哪块是导航。导航必须用语义标签既是 HTML5 网页设计作业的得分点也让 CSS 选择器更好写。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title星巴克咖啡网站主页 - 网页设计大作业/title meta namedescription content基于HTML和CSS实现的星巴克风格主页源代码 link relstylesheet hrefcss/style.css /head body header classsite-header nav classnav-container div classlogo !-- 作业里不直接使用官方Logo可以用自制文字Logo代替 -- img srcimages/logo.png alt星巴克风格咖啡店Logo /div ul classnav-list lia href#hero classnav-link首页/a/li lia href#menu classnav-link热门饮品/a/li lia href#story classnav-link门店故事/a/li lia href#footer classnav-link联系我/a/li /ul /nav /header这里有四个细节需要解释清楚第一langzh-cn必须和页面语言一致否则浏览器翻译和中文排版都可能异常。第二meta viewport是移动端适配的基础没有这一行后面的媒体查询在小屏幕下会直接失效。第三导航没有用div而是用ul li a这样即使 CSS 加载失败页面上仍然能看到一组有序的链接。第四锚点链接href#menu对应后续 section 的id配合 CSS 的scroll-behavior: smooth就能做出“点击导航平滑滚动”的效果不加 JavaScript 也能实现。2.3 main 里放三个 sectionHero、饮品卡片和品牌故事主体内容建议全部包在main里。一个页面只允许一个main这是 HTML5 的语义规范也是网页设计大作业里比较容易拿分的点。main section idhero classhero h1欢迎来到星巴克风格咖啡主页/h1 p用 HTML 与 CSS 还原的静态网页设计大作业/p a href#menu classbtn-primary查看热门咖啡/a /section section idmenu classmenu-section h2人气饮品/h2 div classmenu-grid article classmenu-card img srcimages/latte.jpg alt拿铁咖啡 h3拿铁/h3 p浓缩咖啡与牛奶的经典组合/p /article article classmenu-card img srcimages/mocha.jpg alt摩卡咖啡 h3摩卡/h3 p巧克力酱与奶泡的层次感/p /article article classmenu-card img srcimages/coldbrew.jpg alt冷萃咖啡 h3冷萃/h3 p低温慢萃带来的柔和口感/p /article /div /section section idstory classstory-section h2门店故事/h2 p这里可以放一段关于咖啡豆产地、店铺空间设计或品牌理念的文字。/p /section /main页面里h1只保留一个放在 Hero 区帮助搜索引擎和阅读器更快识别主题。h2是每个区块的小标题饮品卡里的标题用h3。article表示一个独立完整的内容块即使把一张卡片单独拿走它也能被理解所以比每个卡片都写div更合适。2.4 footer 不只是一行版权页脚在网页设计大作业的评分表里占不了太多分但做得好能让整页完成度明显提升。建议至少分成左右两列一列放关于信息一列放联系方式底部再放版权。footer idfooter classsite-footer div classfooter-columns div classfooter-col h3关于主页/h3 p本页面为网页设计大作业演示仅用于学习 HTML 与 CSS 布局。/p /div div classfooter-col h3联系/h3 p某市某路 100 号/p plessonexample.com/p /div /div p classcopyright© 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但如果课程只教了 HTMLCSS完全可以用 radio hack 实现一个可点击切换的纯 CSS 轮播。先写 HTML 结构注意三个input必须放在.slider容器的最前面并且不能包在别的元素里section classslider idslider input typeradio nameslide idslide-1 checked input typeradio nameslide idslide-2 input typeradio nameslide idslide-3 div classslides div classslide stylebackground-image: url(images/s1.jpg);/div div classslide stylebackground-image: url(images/s2.jpg);/div div classslide stylebackground-image: url(images/s3.jpg);/div /div div classslider-nav label forslide-11/label label forslide-22/label label forslide-33/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[typeradio] { 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[forslide-1], #slide-2:checked ~ .slider-nav label[forslide-2], #slide-3:checked ~ .slider-nav label[forslide-3] { background: var(--sb-green); }transform: translateX(-33.3333%)中的百分比是相对.slides自身宽度计算的。.slides宽度是 300%位移到自己宽度的三分之一正好是一屏。提示radio hack 的硬性条件是input和.slides、.slider-nav必须是同一个父元素的兄弟节点否则~选择器选不中目标。如果页面里还有其他input[typeradio]用nameslide同一个组名隔离。这套代码没有任何 JavaScript但能从一号图切到三号图并让指示器圆点高亮。对大作业来说可解释性比花哨程度更重要。4.3 类名规范和注释决定源代码能不能“答辩”源代码能不能被老师快速看懂比“页面是否好看”更容易影响分数。我一般用 BEM 风格的简写块名 下划线 元素名修饰状态用--。不推荐的类名推荐的类名原因header1site-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. 交作业前按这三步验证 HTMLCSS 主页避免细节扣分5.1 第一步用浏览器 F12 检查布局和响应式写完源代码后不要只在自己的窗口里看按 F12 打开开发者工具点设备工具栏图标把窗口宽度拖到 768px、480px、320px 三档。重点看三处导航是否折行、饮品卡片是否从三列变两列再变一列、图片有没有溢出。如果 Hero 背景图在小屏下变成只显示中间一小块是background-size: cover的正常行为不需要改但如果白色文字被按钮遮住就需要把媒体查询里的.hero内边距加大。这一步能避免绝大多数“换台电脑就乱版”的问题。5.2 第二步检查图片路径和字体回退栈大作业通常要打包交压缩包别人解压后双击index.html打开。如果图片用的是本地绝对路径如C:/users/...换电脑必然失效。页面里必须用相对路径HTML 中写images/latte.jpgCSS 中写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强制拉伸的杯子变矮。解决办法是一行 CSSimg { object-fit: cover; }object-fit: cover会让图片按比例裁剪填满容器而不是失真变形。Hero 区同理不要写height: 700px改成min-height: 75vh内容变多时高度会自动撑开内容少时也能占满首屏。交作业前最后再点一遍导航里的四个锚点确认点击后能平滑滚动到对应区块并且滚动后导航栏仍吸在顶部。把这几个小地方处理完这份“网页设计大作业基于htmlcss实现的星巴克咖啡网站主页源代码”就从能打开、能截图变成了能在不同环境、不同屏幕下稳定展示的完整主页。本文还有配套的精品资源点击获取
HTML+CSS实现星巴克咖啡网站主页：网页设计大作业完整攻略
简介面向网页设计课程作业场景这份基于超文本标记语言HTML与层叠样式表CSS实现的星巴克咖啡网站主页源代码适合计算机或设计专业学生作为大作业参考也可用于练习静态网页的布局与样式设计覆盖导航栏布局、品牌配色、图文混排以及响应式适配等常见知识点。压缩包内共十七个文件大小五点二四兆包含五个网页结构页面、两个样式控制表、七个动效图片、一个演示视频以及说明文档与授权文件结构页面负责语义组织样式表控制视觉风格动效图片增强页面表现演示视频直观展示站点运行效果。目前已有四十一人学习下载。读者拿到这套源码后可在浏览器中直接运行并修改样式对照学习常用布局技巧与细节写法也能基于现有模块快速改造出属于自己的课程设计形成可复用的静态网站范本。整体目录结构清晰适合按文件逐模块拆解、边看边练。1. 网页设计大作业里的星巴克主页考的不是照抄源码而是切图思路很多人搜“网页设计大作业基于htmlcss实现的星巴克咖啡网站主页源代码”本意是找一份能直接交差的代码。但一份源代码交上去老师大概率会现场打开浏览器指着导航、Banner、饮品卡片和页脚问“这块用什么标签写的”“为什么用 Flex 而不是浮动”答不上来反而比没交还难看。这里不准备把某份现成源码原样搬出来而是把一套最常见、能复现的 HTMLCSS 主页方案拆开讲清楚从语义化骨架到 CSS 布局再到纯 CSS 交互和交作业前的验证。每段都可以直接抄进自己的网页设计大作业里。适合两类人一是在赶网页设计作业选题的学生二是想用静态页面练手布局的初学者。2. 基于 HTML 的星巴克主页骨架从分区到语义化标签2.1 先用大作业评审点反推页面分区大部分《网页设计与制作》或《web网页设计》课程的评分表里主页都会考察四个固定模块导航栏、宣传区、内容展示区、页脚。星巴克主页适合作业是因为它既不需要数据库也不需要后台单靠 HTML 和 CSS 就能呈现一个完整品牌页面的视觉层级。我一般会把页面先切成分区图再落成代码页面分区推荐 HTML 标签具体内容后续 CSS 重点页面头部headernavLogo、主导航列表横排导航、吸顶、间距宣传区section idhero标题、一句话文案、按钮全屏背景、垂直居中内容展示sectionarticle饮品卡片、门店介绍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.jpgCSS 背景图则要看 CSS 文件位置比如url(../images/hero-bg.jpg)。后面会专门说这个相对路径的坑。2.2 头部导航区用 header nav别让 div 铺满全屏很多初版作业里经常看到“div 套 div”找半天不知道哪块是导航。导航必须用语义标签既是 HTML5 网页设计作业的得分点也让 CSS 选择器更好写。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title星巴克咖啡网站主页 - 网页设计大作业/title meta namedescription content基于HTML和CSS实现的星巴克风格主页源代码 link relstylesheet hrefcss/style.css /head body header classsite-header nav classnav-container div classlogo !-- 作业里不直接使用官方Logo可以用自制文字Logo代替 -- img srcimages/logo.png alt星巴克风格咖啡店Logo /div ul classnav-list lia href#hero classnav-link首页/a/li lia href#menu classnav-link热门饮品/a/li lia href#story classnav-link门店故事/a/li lia href#footer classnav-link联系我/a/li /ul /nav /header这里有四个细节需要解释清楚第一langzh-cn必须和页面语言一致否则浏览器翻译和中文排版都可能异常。第二meta viewport是移动端适配的基础没有这一行后面的媒体查询在小屏幕下会直接失效。第三导航没有用div而是用ul li a这样即使 CSS 加载失败页面上仍然能看到一组有序的链接。第四锚点链接href#menu对应后续 section 的id配合 CSS 的scroll-behavior: smooth就能做出“点击导航平滑滚动”的效果不加 JavaScript 也能实现。2.3 main 里放三个 sectionHero、饮品卡片和品牌故事主体内容建议全部包在main里。一个页面只允许一个main这是 HTML5 的语义规范也是网页设计大作业里比较容易拿分的点。main section idhero classhero h1欢迎来到星巴克风格咖啡主页/h1 p用 HTML 与 CSS 还原的静态网页设计大作业/p a href#menu classbtn-primary查看热门咖啡/a /section section idmenu classmenu-section h2人气饮品/h2 div classmenu-grid article classmenu-card img srcimages/latte.jpg alt拿铁咖啡 h3拿铁/h3 p浓缩咖啡与牛奶的经典组合/p /article article classmenu-card img srcimages/mocha.jpg alt摩卡咖啡 h3摩卡/h3 p巧克力酱与奶泡的层次感/p /article article classmenu-card img srcimages/coldbrew.jpg alt冷萃咖啡 h3冷萃/h3 p低温慢萃带来的柔和口感/p /article /div /section section idstory classstory-section h2门店故事/h2 p这里可以放一段关于咖啡豆产地、店铺空间设计或品牌理念的文字。/p /section /main页面里h1只保留一个放在 Hero 区帮助搜索引擎和阅读器更快识别主题。h2是每个区块的小标题饮品卡里的标题用h3。article表示一个独立完整的内容块即使把一张卡片单独拿走它也能被理解所以比每个卡片都写div更合适。2.4 footer 不只是一行版权页脚在网页设计大作业的评分表里占不了太多分但做得好能让整页完成度明显提升。建议至少分成左右两列一列放关于信息一列放联系方式底部再放版权。footer idfooter classsite-footer div classfooter-columns div classfooter-col h3关于主页/h3 p本页面为网页设计大作业演示仅用于学习 HTML 与 CSS 布局。/p /div div classfooter-col h3联系/h3 p某市某路 100 号/p plessonexample.com/p /div /div p classcopyright© 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但如果课程只教了 HTMLCSS完全可以用 radio hack 实现一个可点击切换的纯 CSS 轮播。先写 HTML 结构注意三个input必须放在.slider容器的最前面并且不能包在别的元素里section classslider idslider input typeradio nameslide idslide-1 checked input typeradio nameslide idslide-2 input typeradio nameslide idslide-3 div classslides div classslide stylebackground-image: url(images/s1.jpg);/div div classslide stylebackground-image: url(images/s2.jpg);/div div classslide stylebackground-image: url(images/s3.jpg);/div /div div classslider-nav label forslide-11/label label forslide-22/label label forslide-33/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[typeradio] { 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[forslide-1], #slide-2:checked ~ .slider-nav label[forslide-2], #slide-3:checked ~ .slider-nav label[forslide-3] { background: var(--sb-green); }transform: translateX(-33.3333%)中的百分比是相对.slides自身宽度计算的。.slides宽度是 300%位移到自己宽度的三分之一正好是一屏。提示radio hack 的硬性条件是input和.slides、.slider-nav必须是同一个父元素的兄弟节点否则~选择器选不中目标。如果页面里还有其他input[typeradio]用nameslide同一个组名隔离。这套代码没有任何 JavaScript但能从一号图切到三号图并让指示器圆点高亮。对大作业来说可解释性比花哨程度更重要。4.3 类名规范和注释决定源代码能不能“答辩”源代码能不能被老师快速看懂比“页面是否好看”更容易影响分数。我一般用 BEM 风格的简写块名 下划线 元素名修饰状态用--。不推荐的类名推荐的类名原因header1site-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. 交作业前按这三步验证 HTMLCSS 主页避免细节扣分5.1 第一步用浏览器 F12 检查布局和响应式写完源代码后不要只在自己的窗口里看按 F12 打开开发者工具点设备工具栏图标把窗口宽度拖到 768px、480px、320px 三档。重点看三处导航是否折行、饮品卡片是否从三列变两列再变一列、图片有没有溢出。如果 Hero 背景图在小屏下变成只显示中间一小块是background-size: cover的正常行为不需要改但如果白色文字被按钮遮住就需要把媒体查询里的.hero内边距加大。这一步能避免绝大多数“换台电脑就乱版”的问题。5.2 第二步检查图片路径和字体回退栈大作业通常要打包交压缩包别人解压后双击index.html打开。如果图片用的是本地绝对路径如C:/users/...换电脑必然失效。页面里必须用相对路径HTML 中写images/latte.jpgCSS 中写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强制拉伸的杯子变矮。解决办法是一行 CSSimg { object-fit: cover; }object-fit: cover会让图片按比例裁剪填满容器而不是失真变形。Hero 区同理不要写height: 700px改成min-height: 75vh内容变多时高度会自动撑开内容少时也能占满首屏。交作业前最后再点一遍导航里的四个锚点确认点击后能平滑滚动到对应区块并且滚动后导航栏仍吸在顶部。把这几个小地方处理完这份“网页设计大作业基于htmlcss实现的星巴克咖啡网站主页源代码”就从能打开、能截图变成了能在不同环境、不同屏幕下稳定展示的完整主页。本文还有配套的精品资源点击获取
