第 6 周总结：阶段综合实战 — 智慧工厂监控大屏 + 阶段0毕业
蜗牛往上爬 · 前端工业可视化学习笔记 第 6 周总结
本周是阶段0 的收官周——把前 5 周学到的全部 HTML+CSS 知识整合起来，从零搭建一个深色工业风 Dashboard 大屏页面。纯 HTML+CSS，不加 JS，不加图表库。写完这个页面，HTML/CSS 就算真正"入门"了。
目录
一、本周学了什么
知识图谱
阶段综合实战
├── 布局架构
│ ├── Grid 五区域（grid-template-areas）
│ ├── 图表区 2×2 子网格（grid-column: 1/-1 跨列）
│ └── 响应式三断点（1600 / 1200 / 768）
│
├── 深色主题
│ ├── CSS 变量统一配色（--bg-primary/secondary/tertiary）
│ ├── 荧光强调色（蓝/绿/橙/红）
│ └── 渐变色文字（background-clip: text）
│
├── 组件
│ ├── 设备状态卡片（左侧指示条 + hover 动效）
│ ├── 生产指标面板（大号数字 + 进度条 + 趋势）
│ ├── 告警统计（三色计数卡片）
│ ├── 图表占位区域（虚线边框 + 图标）
│ └── 底部跑马灯（无缝滚动）
│
└── 动效
├── 呼吸灯边框（::before + @keyframes）
├── 数字跳动（animation-delay 错开）
├── 入场动画（fadeInUp + 依次延迟）
└── 状态指示跳动（indicatorPulse）
二、大屏搭建过程回顾
第一步：Grid 骨架（30 分钟）
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
grid-template-columns: 280px 1fr 280px;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}
这是整个大屏的"地基"。五区域划分清楚，后续填充内容。
第二步：配色方案（20 分钟）
用 CSS 变量定义深色工业风配色。这一步虽然简单，但决定了大屏的视觉基调。好的配色让人一眼就觉得"专业"。
第三步：填充内容（2 小时）
左侧：设备状态卡片（4 种状态：运行中/待机/故障）
右侧：生产指标（大号数字 + 进度条）+ 告警统计
中间：4 个图表占位卡片（2×2 网格，第一个跨列）
底部：告警信息跑马灯
第四步：加动效（1 小时）
呼吸灯边框
数字跳动
设备指示条闪烁
页面入场动画
第五步：响应式 + 打磨（1.5 小时）
三个断点适配，代码规范自查。
三、核心技术速记
Grid 五区域布局
无缝跑马灯
.marquee__inner {
display: flex;
white-space: nowrap;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
关键：内容复制一份，动画移动自身一半距离。
呼吸灯边框
.card::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px; bottom: -1px;
border: 2px solid transparent;
animation: borderBreathe 3s ease-in-out infinite;
pointer-events: none;
}
关键：伪元素比卡片大 1px，pointer-events: none 不阻挡交互。
四、本周踩过的坑
坑点 1：grid-area 名称不匹配
/* ❌ HTML 中类名是 sidebar--left，但 grid-area 写成了 left */
.sidebar-left { grid-area: left; }
/* ✅ 类名和 grid-area 不需要一致，但 grid-area 的值必须和 grid-template-areas 中的字符串一致 */
.sidebar--left { grid-area: left; }
坑点 2：跑马灯不滚动
/* ❌ 忘记设置 white-space: nowrap，flex 子元素会换行 */
.marquee__inner { display: flex; }
/* ✅ 必须加 white-space: nowrap 和 flex-wrap: nowrap */
.marquee__inner {
display: flex;
white-space: nowrap;
flex-wrap: nowrap;
}
坑点 3：overflow: hidden 导致侧边栏内容被裁切
/* 大屏设 overflow: hidden 防止双滚动条 */
body { overflow: hidden; }
/* 但侧边栏需要内部滚动 */
.sidebar--left { overflow-y: auto; }
坑点 4：CSS 变量作用域
/* ❌ 在元素内定义变量，外部无法使用 */
.card { --my-color: red; }
.other { color: var(--my-color); } /* 不生效 */
/* ✅ 全局变量定义在 :root */
:root { --my-color: red; }
五、自测清单
完成本周后，你应该能回答：
[ ] Grid 的
grid-template-areas怎么用？和grid-column/grid-row有什么区别？[ ] 深色工业风配色的核心思路是什么？（深底 + 荧光强调）
[ ] 如何用 CSS 变量统一管理配色？
[ ] 设备状态卡片的左侧指示条是怎么实现的？（absolute + 竖条）
[ ] 无缝跑马灯的原理是什么？（复制内容 + translateX(-50%)）
[ ] 呼吸灯边框是怎么做的？（::before + @keyframes）
[ ] 如何让多个动画错开时间？（animation-delay + nth-child）
[ ] 响应式三个断点分别适配什么设备？
[ ] BEM 命名规范的核心是什么？（block__element–modifier）
[ ] 从零搭建一个大屏页面，需要哪几步？
六、阶段0 总回顾
6 周学习地图
阶段0 · HTML + CSS（6 周）
│
├── 第 1 周：HTML 基础
│ └── 标签、列表、链接、图片、表格、表单、语义化
│
├── 第 2 周：CSS 基础
│ └── 选择器、盒模型、文字样式、背景、优先级
│
├── 第 3 周：Flex 布局
│ └── 容器属性、项目属性、常见页面骨架
│
├── 第 4 周：Grid 与响应式
│ └── 网格轨道、区域命名、媒体查询、断点
│
├── 第 5 周：进阶与动效
│ └── 定位、过渡、变换、动画、伪元素
│
└── 第 6 周：综合实战 ⭐
└── 智慧工厂监控大屏（全部知识的整合）
核心能力清单
产出作品集
学习心得
“照着敲 → 自己改 → 独立写” 三遍法是我的核心学习方法。第一遍建立基本认知，第二遍理解参数含义，第三遍真正掌握。
F12 是最好的老师。不知道某个属性什么效果？直接改，实时看。
每日博客是最好的巩固。写文章逼我把知识"讲清楚"，讲不清楚就是没学透。
不要怕犯错。盒模型、Flex 方向、z-index 不生效……这些坑踩过一遍，就再也不会忘了。
CSS 变量 + BEM 是工业级代码的基础。从第 6 周开始养成习惯，后续维护成本大幅降低。
七、下阶段预告：JavaScript 核心基础
阶段0 结束了，但大屏只是"静态的"。接下来进入阶段1（约 10 周）：
阶段1 要学什么
阶段1 · JavaScript 核心基础 + ES6
├── 第 1-2 周：JS 基础（变量、类型、运算符、流程控制）
├── 第 3-4 周：函数与作用域（声明、参数、闭包、箭头函数）
├── 第 5-6 周：对象与数组（方法、遍历、解构、展开运算符）
├── 第 7-8 周：DOM 操作（获取元素、事件监听、样式修改）
├── 第 9 周：ES6 核心（let/const、模板字符串、Promise、模块化）
└── 第 10 周：综合实战（给大屏加上 JS 交互）
阶段1 结束时能做什么
用 JavaScript 操作 DOM，动态修改页面内容
让大屏的时间自动更新
让告警数据动态刷新
用 ECharts 把占位区域变成真正的图表
实现 Tab 切换、弹窗交互等常见功能
🎉 阶段0 毕业！6 周，从 HTML 小白到能独立搭建工业大屏。下一个目标：用 JavaScript 让大屏真正"活"起来！