简介一套以CSS为核心的美食网站前端源码面向Web前端初学者与设计开发者旨在示范如何用HTML5与CSS3搭建结构清晰、外观精美的静态美食展示页并兼顾移动端适配与访问体验。源码包共21个文件包含13张菜品实拍及装饰用JPG、4个CSS样式表、2个HTML页面、1个PNG图标及说明文档压缩包约786KBCSS按全局样式、导航栏、内容区等模块拆分组织HTML负责搭建首页与菜单子页面的骨架图片文件则直接用于菜品展示与页面氛围营造目录划分简明适合逐文件对照学习。目前已有288人学习浏览体量小巧特别适合快速通读。通过研读这份源码可以掌握多CSS文件协同方式、导航与卡片布局、响应式断点设置、图片做美食主题配色的技巧还能了解如何通过精简资源体积和模块化结构提升首屏加载效率对起步阶段的网页设计项目具有直接参考价值。1. 基于CSS的美食网站设计源码不动 JS 也能交出完整交互层把这份基于 CSS 的美食网站设计源码完整拆过一遍之后我的判断是它不像网上那些只做展示的静态作业更像一套换掉 logo 和图片就能直接上线的小型餐饮品牌落地页。从 Hero 区的全屏品牌展示、菜品卡片的悬停反馈到招牌菜 3D 轮播和带涟漪光圈扩散的预订按钮整套视觉交互全部由 HTML 加 CSS 完成不依赖任何 JavaScript 框架。适合刚学完 Flexbox 和 Grid、正缺一个完整实战项目的前端初学者也适合接单时快速交付餐饮站点的开发者。它解决的核心问题很具体把食欲感和高级感落实到布局选型、颜色参数和动画时长上而不是靠素材硬堆整套交互跑下来几乎没有多余依赖加载和渲染效率很高——这就是所谓的高效体验最直接的体现。2. 布局骨架与视觉体系Flex 和 Grid 的分工边界在哪里接单做前端这几年我拆过的 HTML 美食网站源码少说也有几十套最后能真正改一改就交付的共性都是骨架干净。这一章先把源码的布局结构讲透HTML 信息架构怎么分块Flex 和 Grid 各负责哪一段颜色和字体参数怎么定下来。2.1 七层语义化结构把美食站的信息架构先定死整个页面切成七层顶部导航 header、Hero 展示区、关于我们 about、菜品展示墙 menu-section、餐厅环境画廊 gallery、用户评价 reviews、预订表单 booking外加收尾的 footer。源码用的都是语义化标签而不是一长串没有承重能力的 div这个选择直接决定了后续写 CSS 时的工作量。body header classsite-header a href#hero classlogo食光/a nav classmain-nav ul classnav-list lia href#about关于/a/li lia href#menu菜单/a/li lia href#gallery环境/a/li lia href#booking预订/a/li /ul /nav /header main section classhero idhero.../section section classabout idabout.../section section classmenu-section idmenu.../section section classgallery idgallery.../section section classreviews idreviews.../section section classbooking idbooking.../section /main footer classsite-footer.../footer /body这套结构刚看会觉得平淡实际有两个好处。第一section 的 id 和导航锚点完全对应点击导航跳转不需要 JavaScript 参与浏览器原生滚动就能定位。第二写样式时可以沿着语义边界从上往下走我接单改这种源码时基本不用全局搜索 class看一眼标签就能推断样式文件里对应的选择器在哪一段。这里还要提一个容易被忽略的细节标题层级。h1 只保留一个放在 Hero 标题上h2 留给各个 section 标题菜品卡片的名称统一用 h3。爬虫抓下来页面主题就是清晰的品牌加菜品结构。语义化标签在 SEO 里是有权重的这套源码在这块没留后顾之忧交付给客户之后那边做站点推广的同事也不用提一轮整改需求。唯一要注意的是 logo 里的a href#hero页面加载时会触发一次滚动定位。Hero 区如果做了min-height: 100vh的全屏布局这个行为通常无感但如果你把 logo 的 href 写成首页地址反而会丢掉锚点定位的体验。2.2 导航用 Flex、菜品墙用 Grid一维和二维的选型理由最常见的布局混用误区是 Flex 和 Grid 都写得很贪心最后嵌套到自己都改不动。这套源码的选型逻辑很收敛核心一条一行内解决分布问题用 Flex二维行列对齐用 Grid。顶部导航是 Flex 的标准场景。logo 在左、菜单在右元素全部落在一条主轴上justify-content: space-between让两端自动贴边中间空出来的位置交给浏览器计算不需要写死任何 margin。.site-header { position: fixed; top: 0; width: 100%; z-index: 100; background: rgba(255, 248, 240, 0.9); backdrop-filter: blur(10px); /* 毛玻璃滚动时不把背景切一刀 */ } .nav-container { display: flex; justify-content: space-between; align-items: center; padding: 16px 4vw; } .nav-list { display: flex; gap: 32px; /* 子项间距统一交给 gap不用 margin-right */ list-style: none; margin: 0; padding: 0; }这里有三个参数值得单独记住。gap: 32px代替 margin-right避免最后一个菜单项多出右外边距backdrop-filter: blur(10px)配合半透明背景做毛玻璃滚动时导航内容不会和背景图片糊在一起虚化开到 10px 是折中值太高会盖掉背景画面细节padding: 16px 4vw用视口单位做左右留白高分屏上不会出现两边空得过分的问题。菜品展示区完全交给 Grid。源码里定义了一个很能打的网格容器.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自动列数单列最少280px */ gap: 24px; padding: 0 4vw; } .dish-card { background: #fff; border-radius: 16px; overflow: hidden; /* 图片缩放时不从圆角漏出去 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }repeat(auto-fill, minmax(280px, 1fr))必须拆开理解auto-fill让 Grid 根据容器宽度自动计算列数minmax(280px, 1fr)保证每一列最小 280px空间多余就由所有列均分。换到美食网场景里1280px 屏大概是 4 列768px 屏自动变成 2 列完全不需要写断点媒体查询。一套 Grid 声明替代三套媒体查询效率体验就是这么省出来的。gap: 24px同时管理行距和列距。卡片统一border-radius: 16px加overflow: hidden是为了后面菜品图片悬停放大时不会从圆角边缘漏出去。2.3 配色与字体渐变食欲感怎么被 CSS 参数量化美食网站最容易翻车的是整体配色偏轻。甜点站如果清一色马卡龙色信息层级会被全部冲掉。这套源码走的路线是暖色点睛、深灰压文字、奶油白打底一眼能分出主次。参数整理成一张表用途色值设计意图主色CTA、价格、hover#FF6B35橙红同色系里对比最强唤起食欲页面底色#FFF8F0奶油白降低大面积白底的冷感正文色#2B2B2B深灰保证长段落可读性渐变辅助色#FF9A3C / #E8590C陪衬主色用在标题渐变橙红和奶油白属于同一色温区间放在一起不打架又能让按钮在页面里跳出来。标题部分的食欲感主要靠 CSS 字体渐变撑起来这也是最近被反复问到的一个点.brand-title { font-size: clamp(2.4rem, 5vw, 4.5rem); /* 响应式字号一行代替断点 */ font-weight: 800; background: linear-gradient(135deg, #FF6B35, #FF9A3C, #E8590C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 抹掉文字原色露出背景渐变 */ background-clip: text; line-height: 1.15; }最容易被忽略的是background-clip: text必须带上-webkit-前缀否则部分老内核的移动端浏览器会把标题渲染成一个带背景的色块。clamp(2.4rem, 5vw, 4.5rem)把最小字号、视口比例字号、最大字号压进一条声明大屏不糊、小屏不挤是这套模板里效率最高的写法之一。到这一步布局骨架已经立住七层语义结构、Flex 管导航、Grid 管菜品墙、暖色渐变负责第一眼的食欲冲击。下面从 Hero 开始把各个模块逐个落地。3. 核心模块复现从 Hero 区到菜品展示墙的完整链路骨架搭好只是第一步真正决定用户第一印象的是 Hero 区和菜品展示墙能不能立起来。这一章按先结构、再样式、后交互的顺序把源码里最容易抄作业的部分完整复现。3.1 Hero 区全屏背景叠加渐变遮罩的三层写法Hero 区是用户打开页面后最先看到的区域。源码的处理是三层叠加一张全屏背景图打底上面覆盖深色渐变遮罩保证文字可读第三层才是品牌标题和 CTA 按钮。三层关系全部由 background 简写和 flex 对齐完成没有多余嵌套。.hero { min-height: 100vh; /* 永远占满一屏 */ background: linear-gradient(120deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25)), /* 遮罩层先写的盖在上面 */ url(../images/hero-bg.jpg) center / cover no-repeat; /* 背景图铺满 */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 8vw; } .hero-title { color: #fff; font-size: clamp(2.8rem, 6vw, 5.2rem); max-width: 10ch; /* 把标题宽度锁在十个字符强制换行避免撑满整行 */ } .hero-btn { display: inline-block; margin-top: 24px; padding: 14px 36px; border-radius: 40px; background: linear-gradient(135deg, #FF6B35, #FF9A3C); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35); transition: box-shadow 0.3s ease, transform 0.3s ease; } .hero-btn:hover { box-shadow: 0 12px 32px rgba(255, 107, 53, 0.5); /* 阴影加深模拟抬升 */ transform: translateY(-2px); }背景层是这段代码的核心。CSS 背景支持多图层先写的层会盖在后写的层上面所以渐变遮罩写在背景图前面。rgba(0, 0, 0, 0.55)从左上角深色过渡到右下角 0.25 的浅色配合center / cover保证任何屏幕尺寸下背景图不变形。max-width: 10ch这个细节容易被忽略它把标题宽度限制在十个字符以内副标题会被强制挤到下一行视觉重心不会散掉。3.2 菜品卡片悬停缩放、阴影递进和图片内缩放三件套菜品展示墙是这套源码里内容密度最高的部分。每张卡片的 DOM 长这样article classdish-card a href#booking div classdish-thumb img srcimages/dish-03.jpg alt主厨慢烤牛肋排 /div div classdish-info h3主厨慢烤牛肋排/h3 p classdish-desc24 小时低温慢烤搭配红酒酱汁/p p classdish-price¥88 span招牌/span/p /div /a /article交互上卡片用了三组属性做配合卡片本身位移和缩放、阴影递进、图片内缩放三层同时发生悬停时的手感是“整张卡被提起来”而不是“某一部分在动”。.dish-card { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease; will-change: transform; } .dish-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); } .dish-card:hover .dish-thumb img { transform: scale(1.1); /* 图片放大交给容器裁剪 */ }这段有几个参数值得单独讲。cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 标准缓动先快后慢悬停缩放时比默认 ease 多出一丝回弹手感。translateY(-8px)让卡片上浮 8px配合阴影从0 4px 12px加深到0 16px 32px视觉上和手指把卡片提起来一致。图片的scale(1.1)锚定在容器中心图片外层 .dish-thumb 设了overflow: hidden放大后多出部分被裁掉不会撑破 16px 圆角。三层动画时间必须一致卡片位移用了 0.35s图片缩放也必须同节奏否则悬停瞬间会看到图片先动、卡片后动的撕裂感。3.3 文案溢出与区块间距ellipsis 三件套和 clamp 的分工菜品描述如果过长会把卡片撑得高低不平。源码里用了一套经典三件套处理.dish-desc { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 溢出部分用省略号提示 */ max-width: 260px; }white-space: nowrap强制不换行overflow: hidden遮挡溢出内容text-overflow: ellipsis用省略号提示还有内容。三条缺一不可少一条省略号都不出来。想保留两行再省略就改用display: -webkit-box配合-webkit-line-clamp: 2这个写法现代浏览器都认可以直接用。区块间距方面源码没有给每个区块写单独的 padding而是统一了垂直节奏分区之间padding: 6rem 0内部容器统一max-width: 1200px; margin: 0 auto。这样做的好处是滚动时每个分区呼吸感一致。响应式断点保持在 768px 以下和 1024px 以上。768px 以下时导航从横排变成堆叠菜品网格把minmax压到 160px标题字号交给clamp()自动收缩。我一般把 clamp 当字体层面的响应式、媒体查询当结构层面的响应式字体变化是连续的用 clamp 更自然结构变化是离散的用媒体查询更可控。4. 高级 CSS 效果实战3D 旋转、涟漪光圈与鼠标移入交互如果说前两章解决了布局和模块这一章就是这套源码里最容易被检索的部分3D 旋转、涟漪光圈扩散、鼠标移入交互三个点全部来自真实询问。源码用一个招牌菜 3D 轮播区把前两个问题串起来了。4.1 rotateY(60deg) translateZ(300px) 到底长什么样热搜词里那句transform: rotatey(60deg) translatez(300px)是 3D 轮播中侧边卡片的最终状态。把这句话拆开看rotateY(60deg)让元素绕垂直轴旋转 60 度像门被推开一半translateZ(300px)再把它沿 Z 轴正方向推近观察者 300px。两个变换叠加的视觉效果是卡片半侧着面对你同时整张卡片比中间卡片离眼睛更近。方向判断有一条简单的核心规则正角度让元素右边缘向观察者旋转靠近负角度让左边缘靠近。做一个对称的 3D 轮播时左卡片用负角度、右卡片用正角度中间卡片角度归零两翼自然形成朝中间合拢的透视关系。角度继续加大超过 60 度侧面会被压得越来越窄到 90 度就只剩一条线。.carousel-stage { perspective: 1000px; /* 观察者视点距离必须加在父容器 */ } .carousel-item { position: absolute; width: 300px; height: 360px; opacity: 0.7; transform: rotateY(60deg) translateZ(300px); /* 侧边卡片状态 */ transition: transform 0.7s ease, opacity 0.7s ease; backface-visibility: hidden; } .carousel-item.is-active { transform: rotateY(0deg) translateZ(0px); /* 正面卡片归零 */ opacity: 1; z-index: 2; }最关键的是perspective: 1000px必须加在父容器 .carousel-stage 上而不是写在 .carousel-item 自己身上。perspective 定义了观察者到场景的视点距离子元素的 3D 变换只有在父容器提供透视空间时才会形成近大远小的纵深。把 perspective 写在元素自身效果退化成平面压缩整个 3D 感直接消失。backface-visibility: hidden是给轮播加的一道保险旋转角度超过 90 度时背面内容不会反着透出来。4.2 涟漪光圈扩散纯 CSS 实现按钮点击反馈涟漪光圈扩散就是按钮被点击时从中心向外扩散的一圈白色光圈。常见的实现是 JavaScript 在点击坐标处动态插入一个 span播放动画再移除。纯 CSS 想做到同样效果可以把扩散原点固定在按钮中心用:active伪类触发.btn-ripple { position: relative; overflow: hidden; /* 光圈放大后不出按钮边界 */ } .btn-ripple::after { content: ; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin-left: -60px; /* 把伪元素中心对准按钮中心 */ margin-top: -60px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); opacity: 0; pointer-events: none; /* 伪元素不拦截点击 */ } .btn-ripple:active::after { animation: ripple 0.6s ease-out forwards; /* forwards 保留动画末帧 */ } keyframes ripple { 0% { transform: scale(0); opacity: 0.45; } 100% { transform: scale(3); opacity: 0; } }参数上::after伪元素用left: 50%; top: 50%加负 margin 把自己固定在按钮正中心transform: scale(0)让光圈默认不可见点击时:active触发动画。scale(3)把光圈放大到覆盖整个按钮配合 opacity 从 0.45 降到 0形成扩散消失的效果。animation-fill-mode: forwards保留动画结束态避免松手瞬间光圈跳回初始位置。pointer-events: none必须写否则伪元素会挡在按钮上方拦截后续点击。这个方案的边界要说清楚它只能让涟漪从按钮中心扩散不能精确跟随鼠标点击坐标。想跟随坐标就得引入 JS拿到 event.offsetX 再动态设置伪元素位置。我一般用纯 CSS 顶住大部分场景预订按钮的点击反馈没人会拿尺子量圆心。4.3 鼠标移入事件:hover 驱动的多层联动CSS 里的鼠标移入事件标准答案就是:hover伪类。源码的亮点在于 hover 不是只做一层位移而是多层属性同时联动。导航链接的下划线展开是最好抄的一段.nav-list a { position: relative; color: #2B2B2B; text-decoration: none; padding: 6px 0; } .nav-list a::after { content: ; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #FF6B35; transform: scaleX(0); /* 默认不显示 */ transform-origin: left; /* 从左向右展开 */ transition: transform 0.3s ease; } .nav-list a:hover::after { transform: scaleX(1); }这段实现的是下划线从左到右展开。为什么不直接用宽度变化因为transform: scaleX()走的是合成层不会触发回流动画性能更好。transform-origin: left让缩放原点固定在左侧鼠标移入时从左往右展开鼠标移出时 transition 反向播放下划线再从左往右缩回去——如果原点设在 center展开方向会变成向两边同时延伸视觉上差一个档次。整段没有 JavaScript改一个颜色值就能换肤是给设计源码换品牌色时最省心的部分。5. 源码排错避坑样式失效与 3D 效果异常的五个现场这一章把从这套源码实际使用和讨论里收集到的高频问题整理成五条踩坑记录全部按现象、原因、解决三段写基本覆盖了从拿到源码到改完上线的排错全过程。5.1 file:// 协议打开样式全丢本地静态服务才是默认环境现象在 Windows 上直接双击 html 文件打开页面只剩纯文本CSS 全部失效。开发者工具 console 报错信息里能看到类似 Access to CSS stylesheet at file:///C:/Users/... has been blocked 的提示。原因浏览器对 file:// 协议下跨路径的样式表读取做了安全限制。源码里图片和 CSS 的引用都是相对路径HTML 在桌面目录下时CSS 和图片的路径与它不在同一层直接被浏览器屏蔽。这不是代码问题是打开方式问题。解决起一个本地静态服务器再访问。最省事的是 VS Code 的 Live Server 插件也可以用 Python 自带的服务cd food-website python -m http.server 8080 # 在本地 8080 端口起静态服务浏览器访问 http://localhost:8080样式和图片全部正常。从拿到源码第一天就养成这个习惯后续所有 CSS 效果排查才不会被协议问题带偏。提示发布前把整个目录放进 nginx 或任意静态托管服务测试一次file:// 下的问题在生产环境不会出现但这是在本地复现时最容易误判的环节。5.2 换行省略不生效三个属性少一个都不行现象给菜品描述写了 text-overflow: ellipsis文字照样换行或者省略号根本不出现。原因text-overflow: ellipsis 生效依赖三个前提缺一不可white-space: nowrap 禁止换行overflow: hidden 隐藏溢出内容text-overflow: ellipsis 指示浏览器用省略号渲染溢出部分。只写最后一个属性等于没写。解决.dish-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }需要保留两行的场景改用 -webkit-line-clamp这组参数在现代浏览器里可以直接用.dish-desc { display: -webkit-box; -webkit-line-clamp: 2; /* 最多保留两行 */ -webkit-box-orient: vertical; overflow: hidden; }注意display: -webkit-box是 line-clamp 生效的容器前提写成普通 block 会直接失效。5.3 3D 旋转看着像平面缩放perspective 加错容器现象rotateY(60deg) 写上去之后图片只是变窄变扁完全没有门开了一层的那种空间感。原因perspective 被写在了子元素自身。3D 变换需要一个观察视点perspective 就是这个视点距离只有定义在父容器上子元素的 rotateY 才有纵深。写在子元素上效果会被降级成平面压缩。解决把 perspective 提到父容器。.carousel-stage { perspective: 1000px; /* 视点距离 1000px */ } .carousel-item { transform: rotateY(60deg) translateZ(300px); }顺带把 rotateY 的正负方向说清楚正角度右边缘向观察者靠近负角度左边缘向观察者靠近。做对称轮播时右卡片正角度、左卡片负角度、中间卡片 0 度。5.4 字体渐变变成纯色块background-clip 两处前缀必须成对现象brand-title 的渐变效果没出来标题看起来像一块普通的填充色。原因-webkit-background-clip: text和-webkit-text-fill-color: transparent必须成对出现。text-fill-color 负责把文字原色抹掉露出背景层的渐变只写 background-clip 不写 text-fill-color文字原色会把背景盖住。另外如果标题元素是 inline 显示部分浏览器裁不出文字形状。解决.brand-title { display: inline-block; background: linear-gradient(135deg, #FF6B35, #FF9A3C, #E8590C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }加 display: inline-block 是保险保证元素按块级盒模型参与排版background 裁切时能得到完整的文字边界。5.5 浮动残留导致导航错位清除浮动的三种姿势现象header 背景只盖住一半或者菜单项之间莫名错位往下看区块出现重叠。原因局部模块的旧代码里还留着 float。浮动元素会让父容器高度塌陷后面元素会顶上来。虽然这套源码的主力布局已经切成 Flex 和 Grid但改老项目时经常混进历史遗留代码。解决按优先级试这三种。第一种父容器 overflow: hidden第二种伪元素清除法第三种直接改 flex根治。.site-header { overflow: hidden; /* 让父容器包住内部浮动元素 */ } .site-header::after { content: ; display: table; clear: both; }我一般会选第三种float 在现在的项目里基本是纯债务留一天就坑一天。前两种只是止血改 flex 才是根治。6. 把源码改造成自己的作品验证、扩展与迭代习惯源码下载回来能跑是一回事能变成自己的作品是另一回事。最后一章说两个具体动作验证这套源码是否合格以及把它扩成自己的版本。验证最简单的方式是打开 Chrome DevTools 的设备模拟分别过一遍 375px、768px、1280px 三个宽度。375px 看导航会不会乱、菜品网格会不会挤成单列768px 看 Hero 区标题有没有溢出1280px 看 3D 轮播两翼的透视是否正常。然后跑一次 Lighthouse重点看 Performance 和 Accessibility 两项。CSS 动画密集的页面如果 Performance 掉到 90 以下大概率是 shadow 或 blur 用得太厚排查顺序先看是否有元素在动画里触发了重排。npx lighthouse http://localhost:8080 --view # 对本地服务做一次完整审计扩展方向上最容易出效果的是把菜品展示墙改成可筛选的分类。思路是给每个 dish-card 加上>const filterBtns document.querySelectorAll(.filter-btn); const cards document.querySelectorAll(.dish-card); filterBtns.forEach((btn) { btn.addEventListener(click, () { const category btn.dataset.category; cards.forEach((card) { card.style.display category all || card.dataset.category category ? block : none; }); }); });这段代码本身不复杂关键在 HTML 里把 style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />