# ceshi02

**Repository Path**: pear2007/ceshi02

## Basic Information

- **Project Name**: ceshi02
- **Description**: ceshi02  jiyomng
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-22
- **Last Updated**: 2026-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 《前端开发实战》课程教学项目

> 面向 24 计算机应用技术专业（李小明）的《前端开发实战》课程教学材料合集。
> 技术栈：**原生 HTML5 + CSS3 + JavaScript**，无前端框架，从零构建语义化结构。

---

## 项目简介

本仓库为《前端开发实战》课程的教学实战产物，包含多个知识点演示页、交互式教学游戏、综合实战页面，以及一个完整的招商加盟落地页子项目。所有页面均采用原生 HTML/CSS/JS 实现，重点演示 CSS3 新特性（Flexbox、Grid、动画、渐变、阴影等）与组件化开发思路。

## 目录结构

```
.
├── README.md                          # 本文件
├── content.md                         # 海报文案内容（AI 主题分享会）
├── 隆江猪脚饭招商加盟落地页设计方案.md  # 落地页设计文档（12 章 + 2 附录）
│
├── # ─── 知识点教学演示页 ───
├── css3-basics-tutorial.html          # CSS3 基础知识点教学演示
├── css3-teaching-demo.html            # CSS3 教学演示工具（按钮触发+实时演示+源码区）
├── flexbox-demo.html                  # Flexbox 布局模型交互式演示
├── flexbox-lab.html                   # Flexbox 弹性盒子布局实验
├── resume-personal-info-demo.html     # 简历个人信息区教学演示
│
├── # ─── 交互式教学游戏 ───
├── css3-game.html                     # CSS3 特性翻牌大挑战（边玩边学）
├── flexbox-game.html                  # Flexbox 打地鼠小游戏
├── climb30.html                       # 攀岩挑战游戏（是男人就爬30层）
│
├── # ─── 综合实战页面 ───
├── poster.html                        # AI 主题分享会海报
├── resume.html                        # 个人简历（李明）
│
└── longjiang-landing/                 # 隆江猪脚饭招商加盟落地页子项目
    ├── index.html
    ├── css/  js/  images/
    └── README.md                      # 子项目说明
```

## 页面清单

### 知识点教学演示页

| 文件 | 说明 |
|------|------|
| `css3-basics-tutorial.html` | CSS3 基础知识点系统教学，覆盖选择器、盒模型、渐变、阴影、动画等 |
| `css3-teaching-demo.html` | CSS3 教学演示工具，采用"按钮触发 + 实时演示区 + 源码区（语法高亮可复制）"三段式结构 |
| `flexbox-demo.html` | Flexbox 交互式演示，主轴/交叉轴/容器属性/项目属性可视化调节 |
| `flexbox-lab.html` | Flexbox 布局实验，可自由组合属性观察效果 |
| `resume-personal-info-demo.html` | 简历个人信息区教学，演示圆形头像、Flexbox 对齐、渐变与阴影 |

### 交互式教学游戏

| 文件 | 说明 |
|------|------|
| `css3-game.html` | CSS3 特性翻牌大挑战，过关后弹出知识点讲解层（属性说明+CSS代码+解析+应用场景） |
| `flexbox-game.html` | Flexbox 打地鼠小游戏，通过布局属性完成挑战 |
| `climb30.html` | 攀岩挑战游戏，30 层关卡逐步进阶 |

### 综合实战页面

| 文件 | 说明 |
|------|------|
| `poster.html` | AI 浪潮主题大学生分享会海报，文案见 `content.md` |
| `resume.html` | 个人简历页面（李明） |

### 子项目：隆江猪脚饭招商加盟落地页

位于 `longjiang-landing/`，完整的单页招商加盟落地页，核心目标为引导意向加盟商完成留资转化。详见 [`longjiang-landing/README.md`](./longjiang-landing/README.md)。

- 主品牌色 `#8B2500`（深酱红，取自卤水色泽）
- 留资表单字段采用 `snake_case`，与后端 JSON 保持一致
- 当前使用 Mock 数据，已预留 `/api/leads` 接口

## 技术栈

- **HTML5**：语义化标签结构
- **CSS3**：Flexbox、Grid、媒体查询、自定义属性、动画（@keyframes）、渐变、阴影
- **原生 JavaScript**：ES6+，无前端框架、无构建工具
- **移动优先**：响应式布局，媒体查询适配多端

## 本地预览

所有页面均为静态 HTML，可直接双击打开。如需本地服务器（推荐使用 Node.js）：

```bash
# Node.js（推荐）
npx http-server -p 8080

# 或
npx serve -p 8080
```

访问 `http://localhost:8080` 即可浏览各页面。

## 教学演示页交互结构

知识点演示页统一采用三段式交互结构：

1. **按钮触发区**：点击按钮切换演示主题
2. **实时演示区**：即时渲染对应效果
3. **源码区**：语法高亮显示对应 CSS/HTML 代码，支持复制

教学游戏过关后弹出知识点讲解层，包含：属性说明、CSS 代码、解析、应用场景。

## 相关文档

- [`隆江猪脚饭招商加盟落地页设计方案.md`](./隆江猪脚饭招商加盟落地页设计方案.md) — 落地页完整设计方案（12 章 + 2 附录）
- [`content.md`](./content.md) — AI 主题海报文案内容与设计思路
- [`longjiang-landing/README.md`](./longjiang-landing/README.md) — 落地页子项目说明

## 开发约定

- 代码命名使用英文，注释使用中文
- 后台字段名使用 `snake_case`，与后端 JSON 保持一致
- 配置文件采用英文命名，环境变量使用大写蛇形
- CSS 优先使用 Flexbox / Grid 等新特性