HTML CSS网页制作实战：千年之恋静态页解压改造指南

简介：这份面向前端初学者的爱情主题注册页实例，围绕 HTML 与 CSS 的基础应用展开，适合用来练习表单结构、页面布局与视觉美化。压缩包共 7 个文件，包含 5 张 jpg 图片素材、1 个 CSS 样式表和 1 个 HTML 页面，整体约 336KB，体量轻便，便于直接打开对照学习。已有 4922 人学习或下载，具备一定的参考热度。读者可从中看到注册表单的标签组织、输入字段设置，以及背景色、字体、边距、浮动定位、媒体查询和语义化标签等写法，并借助图片素材完成横幅、标识、按钮与背景区域的浪漫氛围呈现，并体会主题情感如何转化为页面设计语言。对于刚接触网页制作的学习者，这是一份可拆解、可修改、可复用的实战案例，有助于理解盒模型、CSS 选择器以及从结构搭建到样式实现的完整流程。

1. 一个只靠 HTML CSS 网页制作撑起来的浪漫页面，到底值不值得解压

有朋友把「网页制作千年之恋.rar」丢给我，说想做个浪漫主题的纪念页面，问我能不能直接拿去改。我解压完翻了十分钟，得出一个稍显反直觉的结论：这种全静态的 HTML CSS 网页制作作品，反而比一堆框架搭起来的页面更值得当作练手素材。原因很实际，它没有构建步骤，没有依赖安装，双击 index.html 就能看到第一屏，改一个色值刷新一下就有反馈。它适合三类人：第一类是完全没碰过前端、想从零做出一个能发给别人看的页面的新手；第二类是要交一份网页设计作业或作品集，需要现成结构去改的学生；第三类是我这种老手，偶尔需要一个干净的小样本来验证某个 CSS 布局或动效写法。它不适合谁也得说清：如果你要做的是带后台、带登录、带数据存储的站点，这个包帮不上忙，它是一个纯展示型页面，价值在视觉与结构，不在业务逻辑。

2. 解压之后先别急着改：目录结构与技术选型判断

拿到这种包，我一般先看两样东西：目录长什么样、有没有 package.json。没有 package.json 基本可以判定是零构建的静态站，所有改动的效果都直接体现在文件里，不用等编译。这一步花两分钟，能省掉后面半小时的瞎猜。

2.1 一份典型静态页面的目录清单

这类浪漫主题的网页作品，结构上高度趋同，基本是三段式：首屏图 + 内容卡片区 + 页脚。目录大致如下，我用一个树形结构列出来，你可以拿自己解压出来的包对照一遍，缺哪个文件就说明是精简版或者作者偷懒了。

qiannian-zhilian/ ├── index.html # 主入口：首屏、时间轴、页脚三块全在这一个文件里 ├── css/ │ ├── style.css # 主样式：布局、配色、字号，改动频率最高 │ └── responsive.css # 媒体查询单独拆，方便对着断点一个个调 ├── js/ │ └── main.js # 可选：滚动淡入、打字机效果这类轻交互 ├── images/ │ ├── hero.jpg # 首屏大图，宽度控制在 1920px 以内 │ ├── photo-01.jpg # 内容区的相册缩略图，通常 6~9 张 │ └── icon-heart.svg # 装饰性小图标，SVG 比 PNG 省体积 └── fonts/ # 可选，中文网页字体动辄几 MB，多数作品不带

文件职责和改动频率我按经验排了一张表，第一次改的时候照着走，不容易改乱：

有一点要提前说清：不同人打包的习惯差别很大，有的把样式全塞在 index.html 的<style>里，有的把图片和 CSS 平铺在根目录，还有的用中文文件名。看到这几种情况不用慌，结构乱只是不好维护，不影响跑起来；真正影响跑起来的是路径写错，这个后面第 5 章会细讲。

2.2 为什么这类页面用 HTML + CSS 就够，什么时候必须加 JS

纯 HTML + CSS 能做的事情比很多人以为的多：布局用 flex 和 grid，圆角阴影用 border-radius 和 box-shadow，过渡用 transition，连「滚动到视口才淡入」这种效果都有 CSS 的 animation-timeline 可以试，只是浏览器支持还不齐。所以一个展示型页面，不加 JS 完全能做得很好看。

常见做法是把 JS 留给三类场景：一是需要读取滚动位置或鼠标位置的效果，比如导航栏滚动变色、鼠标跟随光点；二是需要状态控制的东西，比如背景音乐的播放暂停、图片灯箱的打开关闭；三是需要拼数据的地方，比如把一段文字按字符拆开做逐字打字效果。除此之外的视觉需求，优先用 CSS 解决，代码少一半，出问题的概率也低一半。

我自己的判断标准很简单：能靠 CSS 的:hover、transition、animation完成的，一律不写 JS；需要「记住上一次状态」的，才动 JS。这个原则对新手尤其重要，JS 一多，路径、加载顺序、事件绑定任何一个错了，页面就是白屏或者没反应，排查成本直线上升。

2.3 入口文件骨架：一份可以直接抄的 HTML 结构

在改动之前，先把 index.html 的骨架理顺。下面这份结构是我在这个主题下最常用的写法，语义化标签、资源引用顺序、可访问性该有的都留了位置：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- 移动端必须，否则手机上按 980px 虚拟宽度渲染，整页缩成一团 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>千年之恋 | 我们的故事</title> <!-- 先引主样式，再引响应式，顺序不能反，后面的能覆盖前面的 --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!-- 首屏：一张大图 + 主标题 + 一句副标题 --> <header class="hero" id="top"> <div class="hero__inner"> <h1 class="hero__title">千年之恋</h1> <p class="hero__subtitle">从那天起，时间开始有了刻度</p> </div> </header> <!-- 内容区：时间轴卡片，每张卡片是一个节点 --> <main class="timeline"> <article class="card"> <img class="card__img" src="images/photo-01.jpg" alt="第一次见面的地方" loading="lazy"> <div class="card__body"> <time class="card__date" datetime="2023-05-20">2023.05.20</time> <h2 class="card__title">第一次见面</h2> <p class="card__text">那天下着小雨，你把伞往我这边偏了一点。</p> </div> </article> <!-- 其余卡片复制 article 结构即可，改图片和文案 --> </main> <footer class="footer"> <p class="footer__text">写给你的第 <span id="days">0</span> 天</p> </footer> <!-- 脚本放 body 末尾，保证 DOM 已经解析完再执行 --> <script src="js/main.js"></script> </body> </html>

这份骨架里几个点值得单独拎出来说。<meta name="viewport">是移动端适配的前置条件，缺了它，后面写多少媒体查询都是白搭，页面在手机上会被整体缩放。两个<link>的顺序也有讲究，responsive.css 里的规则要能覆盖 style.css，就必须放在后面。图片上的loading="lazy"是浏览器原生懒加载，一行属性解决滚动到才加载的问题，比装一个 JS 库划算。<time>标签的 datetime 属性对搜索引擎友好，虽然这种页面不在乎 SEO，但养成习惯没坏处。

还有那个<span id="days">0</span>，是从首屏日期算到今天的天数占位符，需要 JS 填。这是全页面唯一一个「非纯静态」的点，如果你连这一行 JS 都不想写，把 0 直接写成数字就行，代价是页面放久了数字不会变。

3. 核心模块拆解：首屏、卡片流与主题变量

骨架有了，接下来是最花时间的部分：让页面好看。这一章拆三块——首屏怎么排得稳、卡片流用 flex 还是 grid、以及最重要的一件事：把颜色和字号收进 CSS 变量，否则改主题色的时候你会想砸键盘。

3.1 首屏 hero：大图铺满又不许文字跑偏

首屏是整个页面的门面，也是新手最容易翻车的地方。图片要么不铺满，要么把标题挤到角落里，要么在手机上被裁得只剩一半。核心解法就一句：容器用 flex 居中，背景图用background-size: cover，高度用100vh配一个最小值兜底。

/* style.css 片段：首屏容器 */ .hero { /* 用 100vh 撑满一屏，min-height 防止横屏手机高度过小导致内容溢出 */ min-height: 100vh; min-height: 100svh; /* 新单位：移动端地址栏收起时不跳变，不支持的浏览器会忽略这行 */ display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ text-align: center; background-image: /* 先叠一层半透明黑，压暗底图，白字才压得住 */ linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/hero.jpg"); background-size: cover; /* 铺满容器，多余部分裁掉 */ background-position: center; /* 裁的时候保留中间区域 */ background-attachment: scroll; /* 别用 fixed，iOS 上会闪烁 */ } .hero__title { font-size: clamp(2rem, 8vw, 5rem); /* 字号随视口缩放：最小 2rem，最大 5rem */ color: #fff; letter-spacing: 0.15em; /* 标题字间距拉开，气质立刻不一样 */ margin: 0 0 1rem; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .hero__subtitle { color: rgba(255, 255, 255, 0.85); font-size: clamp(0.9rem, 2.4vw, 1.15rem); letter-spacing: 0.2em; margin: 0; }

逐项说一下为什么这么写。min-height: 100vh是让首屏占满整个视口，但手机上地址栏一收起一展开，vh 会跟着变，页面会跳一下，所以补一行100svh——它取的是「小视口高度」，地址栏展开时的值，不会跳，不支持的浏览器当没看见，向后兼容。背景图上叠的那层linear-gradient是黑底半透明遮罩，作用是把照片压暗，白字放上去才有对比度，这是所有图文叠加场景的通用手法，遮罩透明度 0.35 到 0.55 之间取，太深图片看不见，太浅字看不清。clamp()三个参数分别是下限、随视口缩放的中间值、上限，一行顶掉三段媒体查询，新手最该先学会的一个 CSS 函数。

background-attachment: fixed虽然能做出视差感，但移动端体验很差，滚动时重绘卡顿，我一般直接禁用。

3.2 卡片流：flex 和 grid 的取舍

时间轴那一段，本质是一列卡片。有人用 flex 竖排，有人用 grid。我的选择是：卡片宽度固定、要居中排一列，用 flex；卡片宽度自适应、想根据屏幕宽度自动换列数，用 grid。浪漫主题一般是一列竖排、卡片之间有连线，那就 flex 更顺手。

/* 时间轴容器 */ .timeline { max-width: 880px; /* 内容区最宽 880px，再宽阅读时眼睛要来回扫 */ margin: 0 auto; /* 水平居中 */ padding: 6rem 1.5rem; display: flex; flex-direction: column; gap: 4rem; /* 卡片间距，比 margin 好维护，不用管首尾 */ position: relative; } /* 中间那条竖线：用伪元素画，不占布局，不用额外标签 */ .timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(180, 140, 120, 0.5), transparent); transform: translateX(-50%); } /* 单张卡片：图文左右分布，窄屏时在响应式里改成上下 */ .card { display: grid; grid-template-columns: 1fr 1fr; /* 图一半，文一半 */ align-items: center; gap: 2rem; background: #fff; border-radius: 16px; overflow: hidden; /* 关键：让圆角裁掉内部的直角图片 */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; } .card:hover { transform: translateY(-4px); /* 悬浮上移 4px，轻微反馈就够 */ box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14); } .card__img { width: 100%; height: 100%; object-fit: cover; /* 图片填满格子，不变形，多余裁掉 */ display: block; /* 去掉 img 底部的行内空白间隙 */ }

这里几个参数值得记住。gap在 flex 和 grid 里都能用，比给子元素写margin-bottom再处理:last-child干净得多。object-fit: cover配合固定的高度，是图片不变形的唯一正解，用background-image也行，但那就要给 div，语义上不如 img。overflow: hidden是圆角失效的头号元凶——你把border-radius写在卡片上，图片却顶在角上露直角，十有八九是漏了这行。

至于transform: translateY(-4px)这个量，2px 到 8px 是舒适区，超过 10px 就会有「整块东西跳起来」的廉价感，血泪经验。

3.3 主题变量：改一次色值，全站跟着变

这一节是整个项目里性价比最高的改动。原始包里大概率是到处硬编码#b48c78、#f5f0eb这种色值，你想换个粉色调，得全文搜索替换几十处，还容易漏。正确做法是在:root上定义一组变量，后面所有规则只引用变量名。

/* 放在 style.css 最顶部，所有规则之前 */ :root { /* 主色：从暖棕改成豆沙粉，只改这一行 */ --color-primary: #b48c78; --color-accent: #d98a8a; /* 背景与文字 */ --color-bg: #fdfaf7; --color-text: #3a3230; --color-text-sub:#8a7f7a; /* 字号阶梯，全站统一，避免出现 15px/16px/17px 混用 */ --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 2rem; /* 圆角与阴影，统一手感 */ --radius: 16px; --shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* 动效时长，统一节奏 */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } body { background: var(--color-bg); color: var(--color-text); font-size: var(--fs-base); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.8; /* 中文长文行高 1.8 左右最舒服，1.5 会显得挤 */ }

变量的价值不在「少打字」，在「一致性」。一个页面里出现三种不同的灰色文字，视觉上就是散的，而人会不自觉地写出三种灰。把字号、圆角、阴影、缓动曲线全部收进变量之后，改版就是改变量值，页面立刻换一套气质，这也是二次开发时最省力的切入点。line-height: 1.8这个值对中文尤其重要，汉字块状方整，行间距不够会糊成一片，比英文更需要留白。

4. 动效与适配：让页面「动」起来但不翻车

静态页面加一点点动效，观感差别是数量级的。但动效也是翻车重灾区——抖、卡、手机上错位。这一章讲三件事：关键帧动画怎么写才不突兀、媒体查询断点怎么定、图片和字体怎么处理才不至于让页面「转圈半分钟」。

4.1 关键帧动画：淡入、心跳、缓慢放大

这个主题下最常见的是三种：元素淡入上浮、图标心跳、背景缓慢推近。三种都用@keyframes实现，区别只在动画属性不同。

/* 1. 淡入上浮：卡片进入视口时用，靠 JS 加 .is-visible 触发一次 */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .card { /* 默认透明，等 JS 加上类名才播，避免用户还没滚到就先播完了 */ opacity: 0; animation: fadeUp 0.8s var(--ease) forwards; /* forwards 让动画停在最后一帧 */ } .card.is-visible { animation-play-state: running; } /* 2. 心跳：只用在装饰性小图标上，1.6s 一次，别更快 */ @keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } } .icon-heart { display: inline-block; animation: heartbeat 1.6s ease-in-out infinite; } /* 3. 背景缓慢推近：20 秒一个来回，慢到几乎察觉不到才高级 */ @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } } .hero { animation: slowZoom 20s ease-in-out infinite alternate; } /* 尊重系统设置：用户开了「减少动态效果」就全关 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

三处需要解释。第一，animation: ... forwards里的forwards很关键，没有它，动画播完元素会弹回初始状态，也就是重新变透明，这是新手最常见的「动画播完就消失」的原因。第二，心跳动画的百分比节奏不是随便写的——0、14%、28% 对应的是「两下快跳 + 一段停顿」，这是心电图的节奏，全用 50% 均匀缩放反而像呼吸灯。第三，prefers-reduced-motion那段媒体查询是给易感人群的开关，系统里开了「减弱动态效果」的，页面就不该再晃，成本一行代码，该加。

.hero那个slowZoom要小心和background-attachment: fixed同时用，某些浏览器上会撕裂，二选一。

4.2 媒体查询：三个断点覆盖手机、平板、桌面

断点不用多，三个够用：768px以下手机竖屏，768px到1024px平板，1024px以上桌面。写在 responsive.css 里，用max-width从大到小覆盖，避免规则互相打架。

/* responsive.css：断点按从大到小排列，后面的会覆盖前面的 */ /* 平板及以下：卡片从左右布局改成上下布局 */ @media (max-width: 1024px) { .timeline { padding: 4rem 1.25rem; gap: 3rem; } .card { grid-template-columns: 1fr; /* 单列，图在上文在下 */ } .card__img { height: 260px; /* 单列时必须给固定高度，否则图片撑满原始比例会超高 */ } } /* 手机：缩小字号、收紧间距、隐藏纯装饰元素 */ @media (max-width: 768px) { .hero__title { letter-spacing: 0.08em; } .timeline::before { display: none; /* 窄屏上中间那条竖线会穿过文字，直接隐藏 */ } .card { border-radius: 12px; gap: 0; } .card__body { padding: 1.25rem; } .card__text { font-size: var(--fs-sm); } } /* 超小屏：进一步压缩 */ @media (max-width: 480px) { .timeline { padding: 2.5rem 1rem; } .card__img { height: 200px; } }

写媒体查询有两个坑要避。一是断点数值别乱设，1024、768、480这三个是被无数设备验证过的分界，自己拍脑袋设900px、830px只会让适配逻辑变复杂。二是桌面端默认样式写成什么样，移动端是要覆盖它，不是重写它。上面.card在桌面是两列，到平板改成1fr一列，这就是覆盖；如果反过来，桌面端要靠min-width往上加，规则会越写越多，维护起来很累。

另外一个细节：.card__img在单列布局下必须给固定高度。桌面端用height: 100%是因为格子高度由文字撑开，图片跟着走；一旦变成单列，图片没有参照高度，height: 100%失效，会按原始比例铺开，一张竖图能占满两屏。

4.3 图片与字体：体积决定首屏速度

这个包里最占体积的一定是 images 目录。我见过一个几 MB 的包，打开首屏要等三四秒，全栽在几张没压缩的原图上。处理思路三条：

• 首屏大图控制在 300KB 以内，宽度 1920px 封顶，用工具压到 80% 质量肉眼几乎看不出差别。
• 相册缩略图统一裁成 800×600 再压，不要拿手机原图直接塞。
• 能用 SVG 的装饰元素（心形、分隔线、箭头）一律用 SVG，几 KB 顶掉几十 KB 的 PNG。

字体这块要克制。中文网页字体一个完整字重动辄 3 到 8MB，为了标题好看加载一个中文字体，首屏时间直接翻倍。我的做法是标题用系统自带的衬线字体兜底，比如font-family: "Songti SC", "SimSun", serif，观感上已经有「文艺感」，不需要额外下载。

真要用网络字体，务必加font-display: swap，它让文字先用系统字体渲染出来，等字体加载完再替换，避免出现「白屏几秒然后文字突然出现」的闪现。

@font-face { font-family: "TitleSerif"; src: url("../fonts/title-serif.woff2") format("woff2"); /* woff2 比 ttf 小 30% 以上 */ font-display: swap; /* 关键：先用兜底字体显示，不阻塞渲染 */ font-weight: 400; font-style: normal; }

woff2是现在唯一值得用的格式，ttf和eot是给十几年前的浏览器准备的，这个主题的项目不需要。font-display除了swap还有block和fallback，block会有一段不可见期，fallback介于两者之间，展示型页面一律swap。

5. 排查手册：本地打不开、样式错乱、手机上变形的高频坑

前面几章讲的是「怎么写」，这一章讲「写完不生效怎么办」。我拆这类静态包的经验是：80% 的问题不在代码逻辑，在路径、编码和环境。下面先讲怎么把页面正确跑起来，再列五类我踩过最多次的坑。

5.1 本地起服务的三种方式

新手最容易犯的错是直接双击 index.html 用file://协议打开。纯 HTML 和 CSS 这样看没问题，但只要涉及背景音乐自动播放、字体加载、fetch读取本地 JSON，浏览器会因为同源策略直接拒绝，控制台一片红。正确做法是起一个本地静态服务器。

# 方式一：Python 自带，装过 Python 就有，零依赖 # 在项目根目录（有 index.html 的那一层）执行 python -m http.server 8000 # 然后浏览器打开 http://localhost:8000 # 方式二：Node 环境，npx 免安装 npx serve . -l 8000 # 方式三：编辑器插件 # VS Code 装 Live Server，右键 index.html -> Open with Live Server # 优点是保存即刷新，调样式时最省事

三种方式优先用第三种，因为改一行 CSS 自动刷新，调间距时能省下大量按 F5 的时间。第二种适合已经装了 Node 的环境，serve默认会处理好 404 回退。第一种是兜底，任何装了 Python 的机器上都能跑，我在别人电脑上演示时基本用这个。

端口被占用报Address already in use时，把 8000 换成 8080 或 5500 就行，别去杀进程。

5.2 五类典型坑：现象、原因、解决

第一类：页面打开了，但没有任何样式，白底黑字。现象是 HTML 内容都在，只是丑。原因几乎一定是<link>的 href 路径写错，或者 css 文件夹的实际名字和引用不一致（比如文件夹叫CSS大写）。解决方式：打开浏览器开发者工具，切到 Network 面板刷新，看 style.css 那一行是不是红色 404，是的话对着文件树改路径。另外提醒一句，某些服务器对文件名大小写敏感，本地 Windows 上能跑，传上去就 404，这个坑我踩过不止一次。

第二类：中文全是乱码，显示成一堆问号。原因是文件保存编码和<meta charset>声明不一致，常见于从别处复制来的 HTML 片段，文件本身是 GBK，头部却写着 UTF-8。解决：用编辑器把文件另存为 UTF-8（无 BOM），并确认<meta charset="UTF-8">在<head>的前 1024 字节内。BOM 也值得单独说一句，带 BOM 的 UTF-8 会让页面顶部多出一条空白，肉眼看着像 padding 写错了，其实是文件头有三个看不见的字节。

第三类：首屏背景图不显示，但其他图片正常。八成是 CSS 里的相对路径问题。CSS 文件里的url()是相对于这个 CSS 文件的位置解析的，不是相对于 HTML。所以 style.css 在 css/ 目录下时，引用图片要写../images/hero.jpg，少写那两个点就找不到。这个规则和 HTML 里的 img src 不一样，混起来最容易出错。

第四类：手机上打开，页面被缩成一个很小的版本，字小得看不清。原因是缺 viewport meta，或者写成了width=980。浏览器在没收到 viewport 声明时，会按 980px 的虚拟宽度渲染再整体缩小，看起来就是「整页缩小」。解决就是补上<meta name="viewport" content="width=device-width, initial-scale=1.0">，然后所有媒体查询才会生效。顺带一提，如果补了 viewport 之后出现横向滚动条，检查是不是某个元素写了固定宽度（比如width: 1200px）却没加max-width: 100%。

第五类：加了 padding 之后元素变宽，撑破容器。这是盒模型的问题。CSS 默认box-sizing: content-box，width: 100%加上padding: 20px之后实际宽度是 100% + 40px，直接溢出。解决是在样式最顶部统一重置：

/* 放在 style.css 最前面，一劳永逸 */ *, *::before, *::after { box-sizing: border-box; /* 让 width 包含 padding 和 border */ }

这一行几乎所有现代项目都会写，如果原始包里没有，第一件事就是补上，否则后面每加一个内边距都要重新算宽度。补的时候要放在所有规则之前，包括:root变量那块之前，顺序错了不生效。

6. 二次开发：把通用模板改成自己主题的四步改造

拿到这种包，多数人的目标不是原样跑起来，是改成自己的东西。我按改动量从小到大排了四步，每一步都有明确的验收标准，改完一步刷新一次，出问题能立刻定位到是哪一步引入的。

第一步换皮，只动 CSS 变量。把--color-primary和--color-bg换成你自己的主色，刷新，整站气质就变了。验收标准是页面上不再有任何硬编码的旧色值残留，搜索一下#b48c78，如果还有命中，把它替换成var(--color-primary)。

第二步换内容，动 HTML。卡片数量、文案、日期、图片全部替换。这一步的坑在图片比例，原始卡片是 1:1 的图，你塞一张 3:4 的竖图，object-fit: cover会把上下裁掉一大截，人脸可能就剩半个额头。我的做法是先按 800×600 统一裁一遍再放进去，省得在 CSS 里跟object-position较劲。

第三步加交互。如果原包没有 js/main.js，最小可用版本就两个功能：滚动淡入和天数计算。滚动淡入用 IntersectionObserver，比监听 scroll 事件性能好一个数量级：

// js/main.js：滚动到视口才给卡片加类名，触发 CSS 里的 fadeUp const cards = document.querySelectorAll('.card'); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); io.unobserve(entry.target); // 触发一次就取消监听，避免来回滚动反复播 } }); }, { threshold: 0.2, // 元素露出 20% 就触发，太大要滚很久才有反应 rootMargin: '0px 0px -50px 0px' // 底部提前 50px 触发，观感更自然 }); cards.forEach((card) => io.observe(card)); // 天数计算：从起始日到今天，向上取整 const start = new Date('2023-05-20T00:00:00'); const days = Math.ceil((Date.now() - start.getTime()) / 86400000); const el = document.getElementById('days'); if (el) el.textContent = String(days);

threshold: 0.2是元素露出 20% 时触发，设成 1 要等完全进入视口，用户会觉得「怎么滚到底才出现」。rootMargin底部给-50px是让触发点提前一点，等元素真正滚到视野中央时动画已经播完了，不会出现「边滚边淡入」的拖沓感。unobserve那行别漏，不然来回滚动会反复触发，虽然视觉上不明显，但白白消耗性能。天数用86400000这个毫秒常量而不是自己算月份，是因为跨月跨年、闰年这些情况自己算必错。

第四步部署。纯静态站部署成本极低，丢到任意静态托管服务上就能访问，不需要服务器。唯一要注意的是根路径问题：如果你的站点部署在子目录下（比如example.com/love/），CSS 里所有以/开头的绝对路径都会指向域名根，全部失效，一律用相对路径。我习惯在本地就按相对路径写，部署到哪都不会出问题。

四步走完，验收清单就三条：手机和电脑各打开一次，横向不出现滚动条；控制台没有任何红色报错；断网状态下刷新，页面结构还在（只是图片挂了）。三条都过，基本就能发出去了。

提示：改之前先把原始包完整复制一份另存。静态页面改到后期，很容易出现「明明改回去了但还是不对」的情况，有原始版本能快速比对。

这类页面我改过不下十个，最大的教训不是技术上的，是心态上的：拿到包就直接双击打开，看到样式全丢就开始怀疑代码，折腾半小时才发现只是 file:// 协议拦了字体加载。从那以后我每次拿到一个静态包，第一件事都是先python -m http.server起个本地服务，再动任何一行代码，这个习惯替我省下的时间比学任何一个 CSS 新特性都多。希望帮到你。

本文还有配套的精品资源，点击获取