【HTML+CSS】week6-summary

第 6 周总结：阶段综合实战 — 智慧工厂监控大屏 + 阶段0毕业蜗牛往上爬 · 前端工业可视化学习笔记第 6 周总结本周是阶段0 的收官周——把前 5 周学到的全部 HTML+CSS 知识整合起来，从零搭建一个深色工业风 Dashboard 大屏页面。纯 HTML+CSS，不加 JS，不加图

作者：mario 发布时间：2026-08-20

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day17-polish-wrapup

第十七天：打磨与收尾 — 动效、响应式、阶段0毕业总结蜗牛往上爬 · 前端工业可视化学习笔记第 17 篇大屏的骨架和内容已经搭好了，今天是"画龙点睛"——加上动效让页面活起来，做响应式适配让它换个屏幕也能看，最后写一份阶段0总结，为这段 HTML/CSS 之旅画上句号。目录

作者：mario 发布时间：2026-08-20

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day16-dashboard-build

第十六天：从零搭建工业大屏 — Grid 布局 + 深色主题 + 设备卡片蜗牛往上爬 · 前端工业可视化学习笔记第 16 篇今天是阶段0的"期末考试"——把前 5 周学的 HTML 语义化、CSS 盒模型、Flex 布局、Grid 布局、响应式、动效全部整合到一个项目中，从零搭建一个智慧工厂监

作者：mario 发布时间：2026-08-20

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】week5-summary

第 5 周总结：CSS 进阶与动效 — 让页面"活"起来蜗牛往上爬 · 前端工业可视化学习笔记第 5 周总结本周是 CSS 的"进阶收尾周"——定位让元素脱离文档流，transition 让变化平滑，transform 让变形高效，@keyframes 让动画自动播放，伪元素让装饰不污染 HT

作者：mario 发布时间：2026-08-19

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day15-animation-pseudo

第十五天：动画与伪元素 — 呼吸灯、数据跳动与"隐形元素" 蜗牛往上爬 · 前端工业可视化学习笔记第 15 篇前两天学了 transition（触发式过渡），今天学两个更强大的能力：@keyframes 动画（自动播放）和 ::before/::after 伪元素（不写 HTML 也能插入元素）

作者：mario 发布时间：2026-08-19

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day14-transition-transform

第十四天：过渡与变换 — 让页面"活"起来蜗牛往上爬 · 前端工业可视化学习笔记第 14 篇上一篇学了定位，元素可以放到任意位置——但变化是"瞬间"的。今天学 transition（过渡）和 transform（变换），让元素的变化"平滑进行"：悬停上浮、放大、旋转、变色……这些动效是让页面从

作者：mario 发布时间：2026-08-19

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day13-position-zindex

第十三天：定位与层级 — 让元素"脱离文档流" 蜗牛往上爬 · 前端工业可视化学习笔记第 13 篇前四周学的都是"正常文档流"里的布局——元素一个接一个排列。今天学 CSS 的"定位"机制，让元素可以脱离文档流，放到页面的任意位置。弹窗、固定导航、角标、回到顶部按钮，全靠定位实现。目录

作者：mario 发布时间：2026-08-19

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】week4-summary

第 4 周总结：Grid 布局与响应式 — 一个页面，适配所有屏幕蜗牛往上爬 · 前端工业可视化学习笔记第 4 周总结本周掌握了 CSS 的两大核心能力：Grid 二维网格布局（让页面像 Excel 表格一样排列）和响应式设计（让同一个页面适配手机、平板、PC）。从大屏数据看板到双端适配页面，

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day12-responsive-practice

第十二天：响应式实战 — 一个 PC/手机都适配的完整页面蜗牛往上爬 · 前端工业可视化学习笔记第 12 篇前两天学了 Grid 布局和响应式基础。今天把它们综合起来，做一个完整的响应式页面——导航栏、统计卡片、设备列表在 PC 和手机之间自动切换布局。同时搞定图片自适应、字体自适应和常见设备

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day11-responsive-basics

第十一天：响应式设计 — 一个页面，适配所有屏幕蜗牛往上爬 · 前端工业可视化学习笔记第 11 篇上一篇用 Grid 做了一个漂亮的"数据看板"，但只在 PC 上好看。今天学响应式设计——让同一个页面在手机、平板、PC 上都自动适配。核心手段：媒体查询、流式单位、移动优先。目录

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day10-grid-layout

第十天：Grid 二维布局 — 让页面像"Excel 表格"一样排列蜗牛往上爬 · 前端工业可视化学习笔记第 10 篇上周掌握了 Flex（一维排列），今天学 Grid（二维网格）。如果说 Flex 是"排队"，Grid 就是"Excel 表格"——同时控制行和列。大屏上那些整齐排列的数据面板

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】week3-summary

第 3 周总结：Flex 布局 — 让盒子"自觉排队" 蜗牛往上爬 · 前端工业可视化学习笔记第 3 周总结本周从零掌握了 CSS 最核心的布局方案——Flex 弹性布局。从"主轴/交叉轴"的概念，到容器属性、项目属性，再到三种经典页面骨架，6 天时间让布局从"手动摆放"变成"自动排队"。目录

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day09-flex-comprehensive

第九天：Flex 综合布局 — 搭一个完整的企业信息展示页蜗牛往上爬 · 前端工业可视化学习笔记第 9 篇前两天分别学了 Flex 的容器属性和项目属性，今天把它们全部用上，搭一个完整的企业信息展示页——顶部导航 + 侧边栏 + 统计卡片 + 设备列表 + 页脚。这个页面就是未来大屏页面的雏形

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day08-flex-advanced

第八天：Flex 进阶 — 让每个项目有自己的"个性" 蜗牛往上爬 · 前端工业可视化学习笔记第 8 篇上一篇学会了用容器属性让所有项目"整齐排队"。今天学项目属性——让每个项目有自己的"个性"：有的撑满剩余空间、有的固定宽度、有的单独控制对齐。这是 Flex 从"能用"到"好用"的关键一步。

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day07-flex-core

第七天：Flex 弹性布局 — 让盒子"自觉排队" 蜗牛往上爬 · 前端工业可视化学习笔记第 7 篇前两周学了 HTML 骨架和 CSS 基础的"单盒子"样式。但从今天开始，我们进入 CSS 最核心的章节——布局。Flex 是当下使用率最高的 CSS 布局方案，三行代码就能让盒子水平居中、垂直居

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】week2-summary

第 2 周总结：CSS 基础 — 从"毛坯房"到"精装修" 蜗牛往上爬 · 前端工业可视化学习笔记第 2 周总结本周从零学习了 CSS 基础三件套：选择器（指哪打哪）、盒模型（每个元素都是盒子）、层叠与优先级（样式冲突时谁说了算）。用 6 天时间，把上周的 HTML “毛坯房"装修成了有渐变、阴

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day06-background-priority

第六天：背景、继承、层叠与优先级 — 当样式"打架"时谁说了算蜗牛往上爬 · 前端工业可视化学习笔记第 6 篇前两天学会了选择器和盒模型。今天处理三个"为什么"：为什么给一个元素写了两条样式，只有一条生效？为什么 body 设了颜色，段落自动变色？为什么别人的背景是渐变的，而我只会纯色？搞懂

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day05-box-model

第五天：盒模型与文字样式 — 搞清楚每个盒子"有多大多远" 蜗牛往上爬 · 前端工业可视化学习笔记第 5 篇上一篇学会了用选择器"瞄准"元素。今天学 CSS 最核心的概念——盒模型：每个 HTML 元素都是一个矩形盒子，它的宽高、内边距、边框、外边距决定了页面布局。同时搞定文字样式，让内容"好看

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】day04-css-selectors

第四天：CSS 入门 — 选择器，让样式"指哪打哪" 蜗牛往上爬 · 前端工业可视化学习笔记第 4 篇上周我们用 HTML 搭出了网页的骨架。今天开始学 CSS，让网页从"毛坯房"变成"简装房"。CSS 的核心只有两件事：选中元素（选择器）和设定样式（属性+值）。今天先练到"指哪打哪"。目录

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发

【HTML+CSS】week1-summary

第 1 周总结：HTML 基础 — 从零搭出能用的网页蜗牛往上爬 · 前端工业可视化学习笔记第 1 周总结本周从完全零基础起步，用 6 天（每天 2 小时）完成了 HTML 基础的搭建。从"HTML 是什么"到"独立写出设备信息登记表单页"，以下是本周的完整复盘。目录

作者：mario 发布时间：2026-08-18

分类：默认分类 , HTML+CSS

标签： #前端开发