一、项目介绍 & 核心亮点
很多刚入门前端的小伙伴，学完 HTML 标签和 CSS 基础语法后，总会遇到一个核心痛点：语法都看懂了，但不知道怎么写出一个完整的、可落地的页面，找不到适配新手的练手项目 ------ 要么需要复杂的 JavaScript 逻辑，要么结构混乱不符合规范，要么依赖本地素材，复制代码也跑不起来。
今天就给大家带来一个零门槛、纯 HTML+CSS、无 JavaScript、复制就能运行的奶茶店静态网页项目，全程保姆级讲解，代码带完整注释，非常适合新手拿来练手，写完就能直接放进简历的前端作品集里！
项目核心亮点
- 纯 HTML+CSS 实现，零 JS 代码，新手完全能看懂、能修改
- 全语义化标签编写，结构清晰，符合前端开发规范
- 完整的企业级页面结构：固定导航栏、全屏 Banner 宣传区、产品卡片列表、页脚信息区，覆盖官网核心模块
- 所有图片使用在线占位图，无需下载本地素材，彻底解决新手图片路径报错问题
- 自带流畅的 hover 交互效果，兼顾美观性和实用性
- 代码逐行带注释，可直接修改复用，适配甜品店、咖啡店、小店官网等多种场景
二、最终效果预览
最终实现的页面分为 4 个核心模块，打开浏览器即可看到完整效果：
- 顶部固定导航栏：带店铺 logo 和导航菜单，滚动时固定在页面顶部，hover 有颜色变化
- 全屏 Banner 区：带背景遮罩的宣传图，居中的宣传文案和下单按钮，适配不同屏幕宽度
- 热门产品区：卡片式布局的产品列表，带产品图、名称、介绍和价格，hover 时有上浮动画
- 底部信息区：深色背景的页脚，带店铺版权、地址和营业时间信息
三、前置知识 & 开发环境
前置知识要求（零压力门槛）
- 了解 HTML 基础结构和常用标签的用法
- 掌握 CSS 基础样式、盒模型的核心概念
- 了解 Flex 布局的基础用法（完全不懂也没关系，代码里有详细讲解）
开发环境
- 代码编辑器：推荐 VSCode（免费轻量，新手友好）
- 浏览器：Chrome/Edge 等主流浏览器均可
- 无需安装任何环境、无需配置后端，纯静态文件即可运行
四、核心知识点梳理
跟着这个项目敲完，你就能彻底掌握这些前端入门核心知识点，告别 "只会背语法，不会写页面" 的困境：
- HTML 语义化标签的场景化使用（
header/section/footer等） - CSS 全局默认样式重置，统一页面渲染效果
- Flex 弹性布局，实现水平垂直居中、列表自适应排版
- 固定定位、相对定位、绝对定位的组合使用
- CSS 伪元素、伪类的实战用法（
::before/:hover） - 卡片布局、圆角、阴影、过渡动画的实现
- 网页整体结构的拆分与模块化开发思维
五、分步代码详解
我们先把页面拆分成「HTML 结构搭建」和「CSS 样式编写」两部分，逐模块讲解，让你不仅会抄代码，更懂每一行代码的作用。
5.1 HTML 结构搭建
HTML 是网页的骨架，我们用语义化标签，把页面拆分成 4 个独立模块，结构清晰，后期修改维护也很方便。
第一步：HTML 基础骨架
先写好网页的基础结构，引入 CSS 文件，设置好视口适配，这是所有网页的通用基础：
html
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="zh-CN">
<!-- 网页根标签，设置语言为中文 -->
<head>
<!-- 头部配置区，不显示在页面上 -->
<meta charset="UTF-8">
<!-- 设置字符编码为UTF-8，避免中文乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 视口设置，适配移动端屏幕 -->
<title>温柔奶茶店</title>
<!-- 网页标题，显示在浏览器标签栏 -->
<link rel="stylesheet" href="style.css">
<!-- 引入外部CSS样式文件，和html文件放在同一文件夹下 -->
</head>
<body>
<!-- 网页主体内容，所有可见内容都写在这里 -->
<!-- 后续模块代码都写在body标签内 -->
</body>
</html>第二步：顶部导航栏模块
用语义化header标签包裹导航栏，分为左侧 logo 和右侧导航菜单两部分，结构如下：
html
<!-- 顶部导航栏 -->
<header class="header">
<div class="nav">
<!-- 店铺logo -->
<div class="logo">温柔奶茶店</div>
<!-- 导航菜单 -->
<ul class="menu">
<li>首页</li>
<li>产品</li>
<li>门店</li>
<li>关于我们</li>
</ul>
</div>
</header>
第三步：Banner 宣传区模块
用section标签包裹，分为背景图、遮罩层、宣传文案和按钮，是页面的视觉焦点：
html
<!-- Banner宣传区 -->
<section class="banner">
<!-- 独立插入图片 -->
<img src="images/banner.png" alt="饮品banner" class="banner-img">
<div class="banner-text">
<h1>每一杯，都是温柔</h1>
<p>新鲜食材 · 现点现做 · 暖心上线</p>
<button class="btn">立即下单</button>
</div>
</section>
第四步：产品展示区模块
用section标签包裹，分为标题和产品列表，每个产品用独立的card卡片结构，方便后期新增 / 修改产品：
html
<!-- 产品展示区 -->
<section class="product">
<!-- 区域标题 -->
<div class="title">
<h2>热门产品</h2>
</div>
<!-- 产品列表 -->
<div class="product-list">
<!-- 产品卡片1 -->
<div class="card">
<img src="images/goods1.png" alt="招牌珍珠奶茶">
<h3>招牌珍珠奶茶</h3>
<p>Q弹珍珠 + 浓郁奶香</p>
<span class="price">¥12</span>
</div>
<!-- 产品卡片2 -->
<div class="card">
<img src="images/goods2.png" alt="芋泥波波奶">
<h3>芋泥波波奶</h3>
<p>手工芋泥 + 软糯波波</p>
<span class="price">¥14</span>
</div>
<!-- 产品卡片3 -->
<div class="card">
<img src="images/goods3.png" alt="四季春茶">
<h3>四季春茶</h3>
<p>清爽解腻 · 四季皆宜</p>
<span class="price">¥9</span>
</div>
</div>
</section>
第五步：页脚信息模块
用语义化footer标签包裹，存放店铺的版权、地址、营业时间等信息，是网页的收尾部分：
html
<!-- 底部页脚 -->
<footer class="footer">
<p>温柔奶茶店 © 2026 版权所有</p>
<p>地址：XX市XX路XX号 | 营业时间：10:00-22:00</p>
</footer>
5.2 CSS 样式编写
CSS 是网页的皮肤，我们对应 HTML 的 5 个模块，逐部分编写样式，同时解决新手最容易踩的样式兼容、布局错乱问题。
第一步：全局样式重置
不同浏览器有默认的样式，我们先统一清除，避免页面出现莫名的边距、样式错乱：
css
/* 全局默认样式清除 */
* {
margin: 0; /* 清除所有标签的默认外边距 */
padding: 0; /* 清除所有标签的默认内边距 */
box-sizing: border-box; /* 盒模型设置：内边距和边框不会撑大盒子宽度，新手必加 */
}
/* 全局body样式 */
body {
font-family: "Microsoft YaHei", sans-serif; /* 统一页面字体 */
background-color: #fff9f9; /* 页面背景色，温柔的浅粉色，适配奶茶店风格 */
color: #333; /* 全局默认文字颜色 */
}
/* 清除列表默认样式 */
ul {
list-style: none;
}
/* 统一图片样式 */
img {
width: 100%; /* 图片宽度和父盒子一致 */
display: block; /* 清除图片底部默认的空白间隙 */
}第二步：导航栏样式
实现导航栏固定顶部、左右布局、hover 交互效果，新手可以直接修改颜色和高度：
css
/* 导航栏外层容器 */
.header {
background-color: #fff; /* 导航栏白色背景 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 底部阴影，增加层次感 */
position: sticky; /* 粘性定位：滚动时固定在页面顶部 */
top: 0; /* 固定在顶部0px的位置 */
z-index: 99; /* 提高层级，确保导航栏不会被其他内容覆盖 */
}
/* 导航栏内层容器，控制宽度和居中 */
.nav {
width: 90%; /* 宽度占页面90%，左右留白 */
margin: 0 auto; /* 水平居中 */
display: flex; /* Flex布局，实现左右对齐 */
justify-content: space-between; /* 左右两端对齐 */
align-items: center; /* 垂直居中 */
height: 70px; /* 导航栏高度 */
}
/* logo样式 */
.logo {
font-size: 22px;
font-weight: bold;
color: #ff7d94; /* 品牌主色，温柔的粉色 */
}
/* 导航菜单样式 */
.menu {
display: flex; /* 菜单横向排列 */
gap: 30px; /* 菜单项之间的间距 */
font-size: 16px;
cursor: pointer; /* 鼠标悬浮时显示手型 */
}
/* 菜单项hover效果 */
.menu li:hover {
color: #ff7d94; /* 悬浮时变成品牌主色 */
transition: color 0.3s; /* 颜色变化加过渡动画，更流畅 */
}
第三步：Banner 区域样式
实现全屏背景图、遮罩层、文字垂直水平居中，新手可以直接替换背景图链接：
css
/* Banner外层容器 */
.banner {
height: 400px; /* Banner高度 */
display: flex; /* Flex布局，实现内容居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
text-align: center; /* 文字居中 */
color: white; /* 文字白色 */
position: relative; /* 相对定位，作为伪元素的父级 */
overflow: hidden; /* 隐藏图片溢出部分 */
}
/* 独立图片样式 */
.banner-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 图片不变形、铺满容器 */
object-position: center; /* 图片居中 */
z-index: 0; /* 置于底层 */
}
/* 背景遮罩层，让文字更清晰 */
.banner::before {
content: ""; /* 伪元素必须加content属性 */
position: absolute; /* 绝对定位，覆盖整个Banner */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3); /* 黑色半透明遮罩，透明度0.3 */
z-index: 1;
}
/* Banner文字容器 */
.banner-text {
position: relative; /* 相对定位，提高层级，显示在遮罩层上方 */
z-index: 2;
}
/* 标题样式 */
.banner-text h1 {
font-size: 40px;
margin-bottom: 10px;
}
/* 副标题样式 */
.banner-text p {
font-size: 18px;
margin-bottom: 20px;
}
/* 按钮样式 */
.btn {
padding: 10px 25px; /* 内边距，控制按钮大小 */
background-color: #ff7d94; /* 按钮背景色，品牌主色 */
border: none; /* 清除默认边框 */
border-radius: 30px; /* 圆角，做成胶囊形状 */
color: white; /* 按钮文字白色 */
font-size: 16px;
cursor: pointer; /* 鼠标悬浮手型 */
transition: background-color 0.3s; /* 背景色变化过渡动画 */
}
/* 按钮hover效果 */
.btn:hover {
background-color: #ff5c7c; /* 悬浮时颜色加深，增加交互感 */
}
第四步：产品区域样式
实现卡片自适应布局、标题下划线、卡片 hover 上浮动画，新手可以直接复制卡片新增产品：
css
/* 产品区域外层容器 */
.product {
width: 90%; /* 宽度和导航栏统一 */
margin: 60px auto; /* 上下外边距60px，水平居中 */
}
/* 区域标题容器 */
.title {
text-align: center; /* 标题居中 */
margin-bottom: 40px; /* 标题和产品列表的间距 */
}
/* 标题样式 */
.title h2 {
font-size: 28px;
color: #444;
position: relative; /* 相对定位，作为下划线伪元素的父级 */
display: inline-block; /* 宽度和文字一致，方便下划线居中 */
}
/* 标题下划线，用伪元素实现 */
.title h2::after {
content: "";
width: 60%; /* 下划线宽度为文字的60% */
height: 3px; /* 下划线高度 */
background-color: #ff7d94; /* 下划线颜色，品牌主色 */
position: absolute;
bottom: -8px; /* 下划线在文字下方8px */
left: 20%; /* 左右各留20%，实现居中 */
border-radius: 3px; /* 下划线圆角 */
}
/* 产品列表容器 */
.product-list {
display: flex; /* Flex布局，实现卡片横向排列 */
flex-wrap: wrap; /* 超出屏幕宽度自动换行，适配不同屏幕 */
gap: 20px; /* 卡片之间的间距 */
justify-content: center; /* 卡片水平居中 */
}
/* 产品卡片样式 */
.card {
width: 280px; /* 卡片固定宽度 */
background-color: white; /* 卡片白色背景 */
border-radius: 12px; /* 卡片圆角 */
overflow: hidden; /* 隐藏超出圆角的内容 */
box-shadow: 0 3px 10px rgba(0,0,0,0.08); /* 卡片阴影，增加立体感 */
transition: transform 0.3s; /* 上浮动画过渡 */
}
/* 卡片hover效果 */
.card:hover {
transform: translateY(-5px); /* 悬浮时向上移动5px，实现上浮效果 */
}
/* 卡片内图片样式 */
.card img {
height: 180px; /* 图片固定高度 */
object-fit: cover; /* 图片覆盖容器，不变形 */
}
/* 产品名称样式 */
.card h3 {
font-size: 18px;
padding: 10px 15px 5px; /* 内边距，上下左右留白 */
}
/* 产品介绍样式 */
.card p {
font-size: 14px;
color: #666; /* 次要文字用浅灰色，降低视觉权重 */
padding: 0 15px 10px;
}
/* 产品价格样式 */
.price {
display: inline-block;
padding: 5px 15px 15px;
color: #ff7d94; /* 价格用品牌主色，突出显示 */
font-weight: bold;
font-size: 16px;
}
第五步：页脚样式
实现深色背景的页脚，文字居中，和页面主体形成视觉区分：
css
/* 页脚外层容器 */
.footer {
background-color: #333; /* 深色背景，和页面主体区分 */
color: white; /* 文字白色 */
text-align: center; /* 文字居中 */
padding: 30px 0; /* 上下内边距 */
margin-top: 40px; /* 和产品区域的间距 */
}
/* 页脚文字样式 */
.footer p {
margin-bottom: 8px; /* 两行文字之间的间距 */
font-size: 14px;
}
六、完整可运行代码
代码在02里