现代CSS学习工坊
系统学习现代CSS核心特性与最佳实践的交互式学习站点。
📚 知识点覆盖
CSS3核心特性
- CSS选择器进阶
- 伪类与伪元素
- 盒模型与box-sizing
布局系统
- Flexbox弹性布局
- Grid网格布局
- Subgrid子网格
CSS动画
- CSS过渡动画（Transitions）
- CSS关键帧动画（Animations）
响应式设计
- 响应式设计与媒体查询
- 流体排版与clamp()
CSS变量与函数
- CSS自定义属性（Variables）
- CSS函数（calc/min/max/clamp）
CSS新特性
- 容器查询（Container Queries）
- 层叠层（Cascade Layers）
- :has() 选择器
- CSS滚动吸附（Scroll Snap）
- 现代CSS色彩系统
- 滚动驱动动画（Scroll-Driven Animations）
🎯 功能特性
- 渐进式学习：从基础到进阶的18个核心知识点
- 代码示例：每个知识点包含3个实用代码示例
- 测验题：每个知识点附带测验题，巩固学习成果
- 闪卡复习：支持翻转卡片、键盘快捷键的闪卡模式
- 学习进度：本地存储学习进度，跟踪掌握情况
- 知识点索引：支持搜索和分类筛选
- PWA支持：可离线访问，支持添加到主屏幕
- SEO优化：完整的Open Graph和SEO元数据
🚀 部署
本项目为纯静态站点，可部署到任何静态托管平台：
Vercel（推荐）
vercel deploy
GitHub Pages
git push origin main
📁 项目结构
modern-css-workshop/
├── index.html # 首页
├── learn.html # 渐进式学习页
├── flashcard.html # 闪卡复习页
├── roots.html # 知识点索引页
├── root-detail.html # 知识点详情页
├── progress.html # 学习进度页
├── css/
│ └── minimal.css # 全局样式
├── js/
│ ├── wordData.js # 知识点数据
│ ├── siteConfig.js # 站点配置
│ └── storage.js # 本地存储管理
├── manifest.json # PWA配置
├── sw.js # Service Worker
├── vercel.json # Verc部署配置
├── robots.txt # SEO爬虫配置
└── sitemap.xml # 站点地图
用纯CSS实现一切可能 ✨