（场景引入）
上周在杭州某高校讲座时，有个穿格子衫的男生举手问我："老师，看教程满屏都是Figma、CSS盒子模型，这些词到底啥意思？"这话让我想起刚入行时，盯着"栅格系统"**的自己——今儿咱就用大白话，把这些专业名词给你嚼碎了讲！
▌第一趴：布局类名词
"为啥我的网页总像俄罗斯方块乱堆？"先搞懂这三个词：
1. 响应式设计
说白了就是"网页变形金刚"，2010年Ethan Marcotte提出的概念。记住这个公式：
适配能力=媒体查询+流动网格+弹性图片
举个栗子：你手机刷淘宝时商品自动排成单列，电脑上变三列，这就是响应式设计的魔力
2. 栅格系统
相当于网页的"田字格本"，Bootstrap用的12列栅格最经典
- 优点：元素对齐强迫症的福音
- 坑点：嵌套超过3层容易变俄罗斯套娃
3. 折叠线
别误会！不是说网页能折起来，而是指不滚动屏幕能看到的内容
- 电脑端：首屏高度约900px
- 手机端：控制在667px内最安全
▌第二趴：技术类名词
"HTML、CSS、JS到底啥关系？"这就好比盖房子：
| 名称 | 作用 | 学习难度 |
|---|---|---|
| HTML | 钢筋水泥（结构） | ★☆☆☆☆ |
| CSS | 装修风格（外观） | ★★☆☆☆ |
| JS | 智能家居（交互） | ★★★★☆ |
特别提醒：别死记标签语法！去年带的学生小王，用语义化标签写简历，HR直接给复试加分
▌第三趴：交互类名词
"点按钮没反应算BUG吗？"这些词你得懂：
1. 面包屑导航
不是能吃的那种！就像"首页>女装>连衣裙"的路径提示
- 最佳实践：最多三级
- 反面教材：某电商曾嵌套七层，用户直接迷路
2. 视差滚动
2015年火遍全网的炫技操作，背景和前景不同速滚动
- 适用场景：产品展示页
- 作死案例：某婚庆网站过度使用，60%用户头晕关闭
3. F型浏览模式
尼尔森眼动实验发现，用户阅读网页时视线呈F型
- 重点区域：左上角"黄金三角区"
- 数据支撑：重要内容放前200像素点击率提升38%
▌个人观点时间
干了十年设计的老鸟说句扎心的：现在新人总痴迷学新框架，却连CSS选择器优先级都搞不清。去年面试的00后，80%说不出!important和行内样式哪个权重高。记住啊各位：地基不牢，地动山摇！
最后送个福利：关注某度网盘"设计老张"输入提取码WD2023，有我整理的《网页设计术语中英对照表》。别光收藏啊，明天就拿着对照表去看案例，保管你三天脱白！
