ROS2入门完全指南：从中间件原理到Ubuntu 22.04安装实战
2026/8/26 13:21:53
七夕，怎么会和谁过都一样呢？如果你也是一个人过七夕，不如用代码给自己建一个“专属节日现场”。这篇文章会从一个最简单的 HTML 页面讲起，逐步加入动态效果、部署上线，让你用技术给节日增加一点不同。文章里的完整代码都可以直接复制运行，适合想练手的前端初学者，也适合想在七夕给朋友、对象、家人做一个专属网页的开发者。
开头先回答三个问题：为什么程序员过七夕可以不一样？这个项目能练到哪些技术？读完你可以拿到什么结果？
1. 这篇文章真正要解决的问题
很多人在七夕这天，要么加班，要么刷朋友圈看别人晒礼物，要么点开电商页面不知道买什么。最后得出的结论往往是：过不过都一样，和谁过都一样。
但如果你是一个写代码的人，这个问题其实可以用另一种方式回答。七夕形式感很强，礼物、鲜花、餐厅都容易被复制，但一个由你亲手写出来的网页，从代码逻辑到页面文案都是定制的，别人没办法完全复刻。这就是程序员式的节日成本：它不贵，但它花心思，而且整个过程本身就是一次技术练手。
这篇文章会带你完成一个完整的七夕主题互动网页。它可以做成手机网页发朋友圈，也可以部署到公网让任何人访问。技术栈以 HTML、CSS、JavaScript 为主，可选加入 Python Flask 后处理扫码上传祝福语的功能。整个项目不需要你提前会很多框架，也不用买服务器域名，靠 GitHub Pages 或局域网工具就能跑通。
你可能拿到三个具体结果：
- 一个能打开、能互动、能部署的七夕主题网页项目；
- 一套可复用的“节日氛围感页面”代码模板；
- 一个能写进简历或作品集的小作品，附带完整的开发、测试、部署过程。
在做之前，我先花一节说清楚为什么选择“网页”这种技术形式，以及它和传统图文贺卡、视频祝福的差别在哪里。这不是多余的背景，而是后面所有技术选择的依据。
2. 核心思路与方案选型：为什么用网页而不是 App 或小程序
如果只看最终效果，七夕祝福也可以通过短视频、手写贺卡、微信消息来完成。但网页这种形式有四个不可替代的优点。
第一个优点是成本足够低。不需要注册开发者账号，不需要审核，不需要买证书。只要有一台电脑，一个文本编辑器，一个浏览器，就可以开始改造。对前端基础薄弱的同学来说，这也是最没有门槛的入门路径。
第二个优点是可控性非常高。视频和贺卡的内容是固定的，而网页可以交互。你可以让访客点击按钮触发效果，输入名字生成专属祝福，甚至通过摄像头做照片合成。用户每一次点击都会触发新的反馈，这种参与感远比单方面接收信息要强。
第三个优点是跨平台兼容。网页不需要安装，一个链接就能在手机和电脑上访问。你用微信发出去，对方用微信内置浏览器就能打开，不存在“你做了个 App 对方还要下载安装”的尴尬。
第四个优点是便于部署和版本更新。你写好代码后，推到 GitHub Pages，或者打包发到任意静态服务器，一条命令就能更新内容。如果发现文案写错了、效果不对，你改完重新部署即可，不需要发版。
所以，本项目的技术路线确定为 HTML + CSS + JavaScript 静态页面为主。如果你的需求升级，希望访客能在线提交祝福语并展示出来，再额外加一个 Flask 后端和一个简单的 JSON 存储方案。静态页面的优点是无服务器开销、部署简单；动态后端的优点是数据可积累，但你需要考虑服务器、域名、接口安全等问题。
下面是整体方案对比。
| 技术方案 | 难易程度 | 是否适合本项目 | 说明 |
|---|---|---|---|
| 纯 HTML/CSS/JS 静态页面 | 入门 | 非常合适 | 部署最快，效果已足够 |
| 静态页面 + 第三方留言服务 | 入门 | 合适 | 适合作品展示，需留意服务可用性 |
| Python Flask + JSON 文件存储 | 进阶 | 可选 | 适合做“祝福墙”，需要运行后端 |
| 小程序 / App | 困难 | 不推荐 | 审核和成本周期太长 |
如果你只是想快速跑通一个效果，选第一种即可。如果你想练习前后端交互，选第三种。下面三节先讲环境准备，再讲核心流程和完整代码。
3. 环境准备与前置条件
这次项目对环境要求非常低。你不需要安装数据库，也不需要配置虚拟环境，只要满足下面几个条件就行。
3.1 基础软件要求
- 操作系统：Windows、macOS、Linux 均可；
- 浏览器：建议 Chrome、Edge 或 Firefox 的最新版本，用于调试；
- 文本编辑器：VS Code、Sublime Text、记事本都可以，推荐 VS Code；
- Git：如果你要用 GitHub Pages 部署，建议安装；
- Python 3.8 以上版本：仅在需要运行 Flask 后端时使用，静态页面不需要。
3.2 检验环境
先在命令行里检查 Git 和 Python 是否安装成功。
# 检查 Git 是否可用 git --version # 检查 Python 是否可用 python --version # 或者在某些 Linux 环境下 python3 --version如果上述命令输出了版本号，说明环境没问题。如果提示找不到命令，你需要先安装对应软件。Git 和 Python 的具体安装方式这里不展开，因为不同系统差异较大，按官方安装包下一步即可。
3.3 创建项目目录
我们用一个干净的目录承载整个项目，方便后续部署。
mkdir qixi-page cd qixi-page之后所有代码文件都放在这个目录里。项目结构最终会是这样：
qixi-page/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js ├── assets/ │ └── （图片、背景素材，可选） ├── server.py # 可选：Flask 后端 └── messages.json # 可选：祝福语数据存储第一部分先以纯静态页面为主，所以只需要 index.html、style.css、main.js 三个文件。这样可以快速实现并验证效果，之后再聊部署。
4. 核心流程拆解
整个项目分四步走，每一步都有独立可验证的结果。不要一次性写完所有代码再启动浏览器，因为出了问题很难定位；按步骤拆解，每一步都能确认正确后再继续。
4.1 第一步：搭建基础页面结构
第一步的目标是让浏览器打开 index.html 后，能看到一个包含七夕主题的页面骨架。这个阶段只写 HTML，不做样式，不做 JavaScript。先把信息结构确定下来。
页面应该包含：
- 标题：七夕主题文案；
- 主视觉区：一个可以被替换的图片或文字背景；
- 互动区域：一个按钮，触发后续的“点亮星星”、“弹出祝福”等动作；
- 祝福展示区：预留一个区域，后续动态写入内容。
这个阶段不需要美观，只需要结构完整。写完后用浏览器打开，能读到文字即可。
4.2 第二步：补充 CSS 样式，让页面有“七夕氛围”
第二步的目标是让页面从“纯文字”变成“节日风格”。配色建议采用深蓝夜空背景、暖金色星星、淡粉色点缀。核心是使用 CSS 渐变和动画，做出星空和烛光感。
这个阶段完成后，页面应该能显示背景渐变、按钮和基础动画。可以顺手用 CSS 写出几个小星星闪烁效果，不需要图片资源。
4.3 第三步：加入 JavaScript 交互
第三步是关键，也是整个项目的核心增量。在这个阶段，你会实现以下功能：
- 点击“许愿”按钮，页面出现流星动画；
- 输入想要祝福的人的名字，页面生成一段定制祝福语；
- 页面上随机飘落桃花或星星粒子；
- 显示实时访问时间或倒计时等动态信息。
这些功能单独看都很简单，但组合起来就是“专属感”的来源。
4.4 第四步：部署并分享
第四步是把页面发布到公网。这里提供两条路线：
- GitHub Pages 静态部署：免费、快速、可持续更新；
- Flask 临时公网演示：适合发给朋友临时看，重点是可展示后端能力。
我推荐先完成 GitHub Pages 部署，因为它更通用，且不会出现后端服务退出后链接失效的问题。
5. 完整示例与代码实现
这一节是全文的核心。我会按文件拆解代码，并附上运行方式和验证方法。先看纯静态版本，再看 Flask 扩展版本。
5.1 index.html 基础页面
<!-- 文件路径：qixi-page/index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>七夕 · 为你点亮一颗星</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="starfield" id="starfield"></div> <main class="content"> <section class="hero"> <p class="subtitle">今夜星河滚烫</p> <h1 class="title">七夕，怎么会和谁过都一样呢</h1> <p class="description"> 这个页面是写给 <span id="targetName">你</span> 的。 不管今天你身边是谁，或者此刻只是与自己相处， 都值得被认真对待。 </p> </section> <section class="interactive"> <label for="nameInput">输入一个你想祝福的人的名字：</label> <input type="text" id="nameInput" placeholder="例如：自己、朋友、家人……"> <button id="wishButton" type="button">点亮今晚的星星</button> <p id="wishMessage" class="wish-message"></p> </section> <section class="footer-note"> <p>做一个有仪式感的程序员，今晚可以用代码写一封情书。</p> </section> </main> <script src="js/main.js"></script> </body> </html>这段 HTML 没有加入过多复杂结构，目的就是“先跑通”。其中targetName和nameInput为 JavaScript 提供了操作入口。
你可能会问：为什么不用按钮直接跳转到一个表白页面，而是用输入框？原因是交互深度不同。跳转页面是单向流程，输入名字再生成专属祝福是双向交互，用户会感觉自己参与了页面的生成。这就是“和谁过都一样”的另一种解法：内容是由对方的名字触发出来的，不是预制好的。
5.2 css/style.css 样式文件
/* 文件路径：qixi-page/css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(135deg, #0b0f2a 0%, #1b1e3d 50%, #3a1c4f 100%); color: #fff; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .starfield { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .star { position: absolute; background: #fff; border-radius: 50%; opacity: 0.6; animation: twinkle 2s infinite alternate; } @keyframes twinkle { from { opacity: 0.2; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } } .content { position: relative; z-index: 1; max-width: 720px; padding: 40px 24px; text-align: center; } .hero .subtitle { font-size: 16px; letter-spacing: 6px; color: #f5c3d8; margin-bottom: 16px; opacity: 0.9; } .hero .title { font-size: 36px; line-height: 1.3; margin-bottom: 20px; font-weight: 700; color: #fff3c9; text-shadow: 0 0 20px rgba(255, 220, 150, 0.3); } .hero .description { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 40px; } .interactive { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 32px 24px; backdrop-filter: blur(6px); } .interactive label { display: block; font-size: 14px; margin-bottom: 12px; color: rgba(255, 255, 255, 0.8); } .interactive input { width: 100%; max-width: 360px; padding: 12px 16px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 16px; outline: none; margin-bottom: 20px; text-align: center; } .interactive input::placeholder { color: rgba(255, 255, 255, 0.4); } .interactive button { display: inline-block; padding: 12px 28px; border: none; border-radius: 30px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); color: #3a1c4f; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .interactive button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 154, 158, 0.4); } .wish-message { margin-top: 20px; font-size: 18px; line-height: 1.8; color: #ffe08a; min-height: 32px; } .footer-note { margin-top: 40px; font-size: 13px; color: rgba(255, 255, 255, 0.5); letter-spacing: 1px; }这里真正容易踩坑的是backdrop-filter属性的兼容性问题。部分旧版本浏览器不支持它，页面背景可能显示为不透明白色。如果你发现页面背景变成白底，最简单的处理是去掉backdrop-filter一行，纯色背景依然可以接受。生产环境里真要兼容旧浏览器，建议提供降级背景色。
CSS 部分还做了一个关键设计：星空背景不是图片，而是由 JavaScript 动态生成的 DOM 节点。这样代码体积小，且每颗星的位置可以随机，每次刷新都不一样，满足“独特感”。
5.3 js/main.js 交互逻辑
// 文件路径：qixi-page/js/main.js (function () { "use strict"; // 生成星空背景 var starfield = document.getElementById("starfield"); var STAR_COUNT = 120; function createStars() { if (!starfield) return; for (var i = 0; i < STAR_COUNT; i++) { var star = document.createElement("div"); star.className = "star"; var size = Math.random() * 3 + 1; star.style.width = size + "px"; star.style.height = size + "px"; star.style.left = Math.random() * 100 + "%"; star.style.top = Math.random() * 100 + "%"; star.style.animationDelay = Math.random() * 2 + "s"; star.style.animationDuration = (Math.random() * 2 + 1.5) + "s"; starfield.appendChild(star); } } // 生成定制祝福语 var wishes = [ "愿今晚的星光，帮你记住这一刻。", "不论今天和谁一起过，都值得留下一份仪式感。", "代码会过时，真心不会。七夕快乐。", "希望你下个七夕，依然记得今晚有颗星为你亮着。" ]; function getRandomWish(name) { var base = wishes[Math.floor(Math.random() * wishes.length)]; if (name && name.trim().length > 0) { return name.trim() + "，" + base; } return base; } // 绑定按钮事件 var wishButton = document.getElementById("wishButton"); var nameInput = document.getElementById("nameInput"); var wishMessage = document.getElementById("wishMessage"); function handleWish() { var name = nameInput.value; var message = getRandomWish(name); wishMessage.textContent = message; // 生成一颗“流星”效果 var star = document.createElement("div"); star.className = "shooting-star"; star.style.left = Math.random() * 60 + "%"; star.style.top = Math.random() * 40 + "%"; document.body.appendChild(star); setTimeout(function () { if (star.parentNode) { star.parentNode.removeChild(star); } }, 1200); } if (wishButton) { wishButton.addEventListener("click", handleWish); nameInput.addEventListener("keypress", function (e) { if (e.key === "Enter") { handleWish(); } }); } // 初始化 createStars(); // 如果页面已经有 targetName 可以设置默认祝福对象 var targetNameEl = document.getElementById("targetName"); if (targetNameEl) { targetNameEl.textContent = "你"; } })();这个脚本做了四件事：生成星空、读取输入框内容、随机选择祝福语、生成“流星”。注意shooting-star样式还没有定义，所以你现在运行页面时会生成一个看不见的 DOM 节点。这说明你现在需要补一段 CSS。
5.4 补充流星样式
回到 style.css 末尾追加下面的代码：
.shooting-star { position: fixed; width: 120px; height: 2px; background: linear-gradient(to right, #fff, transparent); border-radius: 2px; transform: rotate(-30deg); z-index: 999; animation: shooting 1.2s ease-in forwards; } @keyframes shooting { 0% { opacity: 1; transform: translate(0, 0) rotate(-30deg); } 100% { opacity: 0; transform: translate(-200px, 120px) rotate(-30deg); } }到这里，纯静态版本的完整互动效果已经完成。你现在可以双击打开 index.html，输入名字，点击按钮，看到祝福文案和流星。
5.5 可选：Flask 后端，做一个“祝福墙”
如果想让访客提交的祝福语被保存下来，并在页面上展示，可以引入 Flask。先安装依赖：
pip install flask然后在项目目录创建 server.py：
# 文件路径：qixi-page/server.py import json import os import random from datetime import datetime from flask import Flask, request, jsonify, render_template app = Flask(__name__) DATA_FILE = "messages.json" def load_messages(): if not os.path.exists(DATA_FILE): return [] with open(DATA_FILE, "r", encoding="utf-8") as f: try: return json.load(f) except json.JSONDecodeError: return [] def save_messages(messages): with open(DATA_FILE, "w", encoding="utf-8") as f: json.dump(messages, f, ensure_ascii=False, indent=2) @app.route("/") def index(): return render_template("index.html") @app.route("/api/wishes", methods=["GET"]) def get_wishes(): messages = load_messages() return jsonify({"data": messages}) @app.route("/api/wishes", methods=["POST"]) def add_wish(): data = request.get_json(force=True) name = data.get("name", "").strip() content = data.get("content", "").strip() if not name or not content: return jsonify({"error": "缺少 name 或 content 参数"}), 400 if len(content) > 200: return jsonify({"error": "content 不能超过 200 字"}), 400 messages = load_messages() messages.append({ "name": name, "content": content, "time": datetime.now().strftime("%Y-%m-%d %H:%M:%S") }) save_messages(messages) return jsonify({"message": "ok"}), 201 if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True)这个后端实现有一个明显思路：用 JSON 文件当存储层。对于小流量、短时效的七夕祝福墙项目，完全够用。你不必为了一次节日分享去安装 MySQL。但如果流量很大，JSON 并发写入会出问题，不建议长期承载高并发请求。此时应该换成 SQLite 或 MySQL。
前端如果想调用这些接口，可以增加一段 fetch 代码：
// 提交祝福语示例 fetch("/api/wishes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "小明", content: "希望今年七夕，大家都能好好爱自己。" }) }) .then(function (res) { return res.json(); }) .then(function (data) { console.log(data); }) .catch(function (err) { console.error(err); });如果你不想写后端，也可以用一个更简单的方法：把祝福语储存在页面 LocalStorage 里。这样至少访客本人的浏览器能保留记录，但换设备就看不到了。根据场景取舍即可。
5.6 本地运行和验证
先验证纯静态版本。直接用浏览器打开 index.html，然后看下面三点：
- 页面是否有深蓝色渐变背景；
- 星空是否出现；
- 输入名字并点击按钮后，页面是否出现祝福语和流星动画。
这里最可能的失败点是shooting-star样式没有追加，导致点击按钮后看起来没有反应。如果你遇到这种情况，优先检查 CSS 里有没有该样式。
验证 Flask 版本时，在项目根目录执行：
# 注意：Flask 版本默认找 templates 和 static 目录 cd qixi-page python server.py然后在浏览器访问http://127.0.0.1:5000，打开开发者工具 Network 面板，尝试调用接口。如果你直接用run(debug=True)，Flask 会在代码变化时自动重载，调试很方便，但生产环境不能用 debug 模式。
6. 部署上线：让链接可以被朋友打开
本地测试没问题之后，下一步就是发布。这里重点讲 GitHub Pages 的部署方式，然后补充 Flask 部署注意事项。
6.1 GitHub Pages 静态部署
先保证你的项目目录已经是一个 Git 仓库。在项目根目录执行：
git init git add . git commit -m "feat: 完成七夕主题页面"接着在 GitHub 上新建一个仓库，把本地代码推上去：
git remote add origin https://github.com/<你的用户名>/<仓库名>.git git branch -M main git push -u origin main然后在仓库的 Settings -> Pages 中，将 Source 选择为Deploy from a branch，分支选main，目录选/root。保存后，GitHub 会生成一个https://<你的用户名>.github.io/<仓库名>/的地址。稍等一两分钟，通过该地址就能访问页面。
要注意：GitHub Pages 默认只支持静态文件。如果你想使用 Flask 后端，不能用 Pages 部署，需要找一台能运行 Python 的云服务器，或者使用 Render、Railway 等平台。
6.2 使用 Flask 的部署注意点
如果选择部署 Flask 服务，至少需要做三件事：
- 把
debug=True改为debug=False； - 设置
host="0.0.0.0"，这样公网才能访问； - 配置反向代理，例如 Nginx 把请求转发到
127.0.0.1:5000。
建议不要直接暴露 Flask 开发服务器到公网。开发服务器性能不足且安全性较弱。如果你只是临时演示给朋友，可以使用ngrok，但要注意不要用于正式生产环境。
7. 常见问题与排查方法
下面几个问题是我自己实践时最容易踩的坑，按出现频率排列。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 页面打开是白屏 | JS 报错，或 HTML 文件路径错误 | 打开浏览器开发者工具 Console 看报错信息 | 检查main.js路径和元素 ID 是否匹配 |
| 点击按钮没有反应 | shooting-star样式缺失，或 JS 绑定事件失败 | 检查 Console 是否有异常；检查按钮 ID | 补充对应 CSS 样式，确保元素 id 与 JS 一致 |
| 背景没有渐变 | CSS 文件未加载 | 打开 Network 面板查看 style.css 状态 | 检查 link 标签路径是否相对正确 |
| 手机上字体很小 | 缺少 viewport 设置 | 查看 HTML head 中是否设置了 viewport | 加上<meta name="viewport"> |
| Flask 接口返回 400 | 请求的 JSON 格式不对 | 检查请求体是否为有效 JSON | 确保 Content-Type 为 application/json |
| GitHub Pages 更新后过一会儿才生效 | CDN 缓存原因 | 强制刷新浏览器或等待几分钟 | 不要频繁叠加，确认 push 成功 |
| 部署后图片资源丢失 | 使用绝对路径、本地路径错误 | 检查仓库文件结构和文件大小写 | 统一用相对路径，文件名不要含中文和大写 |
一个容易忽略的点是项目中存在中文文件名。GitHub Pages 对中文路径的支持虽然已经不错，但为了避免跨平台环境不一致，建议图片资源统一命名为英文小写加连字符，例如night-sky.png，而不是夜空.png。
8. 最佳实践与工程建议
到这里，你已经能独立做出一个七夕主题互动页面。但如果想让这个项目更像一个“作品”，而不是一次性的节日小玩具，下面这些工程建议值得考虑。
8.1 内容安全与敏感信息处理
如果页面最终要发布到公网，建议在表单输入框上做长度限制和内容校验。Flask 示例里已经限制了content不能超过 200 字，这还不够；最好过滤掉 HTML 标签，避免别人提交<script>内容形成 XSS 漏洞。
import re def clean_content(text): # 移除 script 标签 text = re.sub(r"<[^>]+>", "", text) return text.strip()[:200]发布前先自己做一次“恶意输入”测试：在输入框粘贴一段带标签的内容，看页面会不会执行。这个习惯比任何安全教程都重要。
8.2 兼容性与降级策略
不要在代码里依赖太新的 CSS 特性。backdrop-filter、aspect-ratio这类新属性在老旧浏览器中不支持。如果你知道有人会用旧手机打开，就提供基础底色和合理布局，让不支持动画的浏览器也能阅读文案。做前端页面，内容可读性永远优先于视觉特效。
8.3 日志记录
如果加了 Flask 后端，建议在本地至少用日志文件记录接口请求。最简单的做法是：
import logging logging.basicConfig(filename="app.log", level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")每次接收祝福时记录一条。这样即使有人提交了问题内容，你也知道来源时间和请求参数，方便回溯。
8.4 版本管理
像这种小项目也需要用 Git 做好版本管理。在每次改动前后提交一次分组合理的内容，描述尽量清晰。例如：
git add index.html css/style.css js/main.js git commit -m "feat: 增加流星动画效果"这不会耽误多少时间，但对后续回退和回溯很有帮助。
8.5 响应式设计
七夕页面很可能在手机上被打开。建议一开始就采用移动优先的样式设计，确保在 375px 宽度的屏幕上，标题不换行错位、按钮可点击、输入框可正常聚焦。可以通过 Chrome DevTools 的设备模拟来快速检查。
9. 总结与后续学习方向
回到开头那句话：七夕，怎么会和谁过都一样呢？
从技术角度回答，这句话背后藏着一个开发理念：不要把节日互动做成模板，而要把“互动过程”设计成一次定制体验。你可以用静态页面加星星动画制造氛围感，可以用输入框生成专属祝福，也可以用 Flask 做成祝福墙收集朋友们的留言。这些方案的工程难度并不高，但一步步组合起来，就能让同一天、同一个节日，在不同人的访问下呈现不同的结果。
这篇文章帮你走通了完整链路：设计页面结构、写 CSS 氛围感、用 JavaScript 做交互、用 Flask 扩展后端能力、部署上线，以及排查常见问题。你现在缺的不是教程，而是一次实际的动手。
建议下一步尝试以下方向：
- 把页面搬到 HTTPS 环境，体验域名配置和证书申请流程；
- 学习 CSS 动画的高级用法，写一个更精致的流星雨；
- 把 Flask 存储从 JSON 换成 SQLite，体验数据库的基础操作；
- 给页面加一个分享海报生成功能，用 canvas 把祝福语生成图片。
七夕一年只有一次，但写代码的能力每天都在长。与其等一个特别的人来改变节日，不如自己先制造一点不同。如果你按本文搭出了页面，建议先把代码备份到 Git 仓库，再分享给想分享的人。这个七夕，你可以用代码告诉别人：和谁过，确实不一样。