Logo
☆☆☆☆☆
0.0
Intermediate
40h

Grokking CSS 设计模式以应对面试

这个实用且以模式为导向的课程教授专业人员实际使用的 CSS——通过可复用的解决方案来应对反复出现的布局、排版、交互和响应式问题。与其死记硬背孤立的属性，不如将 CSS 组织为基于意图的模式，以应对面试和真实产品开发工作。 你将通过一系列动手挑战逐步学习，这些挑战模拟真实世界场景，聚焦复杂组件、构建流式网格、限制溢出文本、设计可访问的焦点状态等，同时了解每种技术适用的时机与原因。通过理解底层模式，你将具备在不同代码库、框架和设计系统中灵活调整解决方案的判断力。

16 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
View Courses in Subscription
Grokking CSS 设计模式以应对面试
这个实用且以模式为导向的课程教授专业人员实际使用的 CSS——通过可复用的解决方案来应对反复出现的布局、排版、交互和响应式问题。与其死记硬背孤立的属性，不如将 CSS 组织为基于意图的模式，以应对面试和真实产品开发工作。 你将通过一系列动手挑战逐步学习，这些挑战模拟真实世界场景，聚焦复杂组件、构建...

WHAT YOU'LL LEARN

对 CSS 设计模式及其在创建交互式网页中应用的理解

Content

16 Lessons • 0 Quizzes • 0 Challenges

CSS 设计模式课程概述
  1. 1

    课程概述

居中与对齐
  1. 1

    居中与对齐模式

  2. 2

    使用 margin: auto 实现水平居中

  3. 3

    解决方案：使用 margin: auto 实现水平居中

  4. 4

    使用 Flexbox 实现垂直居中

  5. 5

    解决方案：使用 Flexbox 实现垂直居中

  6. 6

    使用 Flexbox 实现完全居中（两个轴）

  7. 7

    解决方案：使用 Flexbox 实现双轴居中

  8. 8

    通过 text-align 实现内联块组居中

  9. 9

    解决方案：通过 text-align 实现内联块组居中

  10. 10

    图像与文本的基线对齐

  11. 11

    解决方案：图像与文本的基线对齐

  12. 12

    媒体对象对齐

  13. 13

    解决方案：媒体对象对齐

  14. 14

    通过 CSS Grid 实现居中

  15. 15

    解决方案：通过 CSS Grid 实现居中

  16. 16

    “Space-Between” + 居中三个项目

  17. 17

    解决方案：“Space-Between” + 居中三个项目

  18. 18

    Flexbox 项目中混合高度子元素的居中

  19. 19

    解决方案：Flexbox 居中混合高度的子元素

  20. 20

    绝对定位的元素在带内边距容器中的居中

  21. 21

    解决方案：在带内边距的容器中实现绝对定位居中

  22. 22

    CSS-only 模态框居中显示

  23. 23

    解决方案：仅使用 CSS 实现模态框居中，并提供回退方案

  24. 24

    居中旋转元素

  25. 25

    解决方案：使旋转元素居中

  26. 26

    居中于已变换（视差）容器内

  27. 27

    解决方案：在已变换（视差）的容器中居中

  28. 28

    N 个项目的动态均匀间距与居中

  29. 29

    解决方案：N 个项目的动态均匀间距与居中

  30. 30

    嵌套多层级居中（网格 + 弹性盒嵌套）

  31. 31

    解决方案：嵌套多层级居中（网格 + 弹性布局嵌套）

等高与流式列
  1. 1

    等高与流体列模式

  2. 2

    Flex 等高列

  3. 3

    解决方案：Flex 均等高度列

  4. 4

    表格显示等高

  5. 5

    解决方案：表格显示等高

  6. 6

    Grid Align-Items Stretch

  7. 7

    解决方案：网格对齐-项目拉伸

  8. 8

    Columns Fluid Layout

  9. 9

    解决方案：列的流式布局

  10. 10

    Flex Wrap Fluid Columns

  11. 11

    解决方案：弹性换行流式列

  12. 12

    Fluid Grid Columns with Auto-Fit

  13. 13

    解决方案：使用 auto-fit 实现流体网格列

  14. 14

    基于容器查询的流式列

  15. 15

    解决方案：基于容器查询的流式列

  16. 16

    使用可变列的响应式 Flexbox

  17. 17

    解决方案：使用变量列的响应式 Flexbox

  18. 18

    使用 CSS Columns 实现平衡的多列内容

  19. 19

    解决方案：使用 CSS Columns 实现平衡的多列内容

  20. 20

    自定义属性控制的列布局

  21. 21

    解决方案：通过自定义属性控制列布局

  22. 22

    Masonry-Style Grid with Equal Column Widths

  23. 23

    解决方案：等宽列的网格布局（Masonry 样式）

  24. 24

    等高子网格布局

  25. 25

    解决方案：等高子网格布局

  26. 26

    水平可滚动的等高卡片

  27. 27

    解决方案：水平可滚动的等高卡片

  28. 28

    IE11 旧版回退等高列

  29. 29

    解决方案：适用于 IE11 的旧版回退等高列

  30. 30

    杂志风格卡片列与断行避免

  31. 31

    解决方案：避免换行的杂志风格卡片列

动画视觉效果
  1. 1

    动画视觉效果模式

  2. 2

    悬停放大图片

  3. 3

    解决方案：悬停放大图片

  4. 4

    淡入通知横幅

  5. 5

    解决方案：淡入通知横幅

  6. 6

    旋转加载指示器

  7. 7

    解决方案：旋转加载指示器

  8. 8

    脉动式行动号召按钮

  9. 9

    解决方案：脉动式行动号召按钮

  10. 10

    滑入式侧边栏面板（concept）

  11. 11

    解决方案：滑入式侧边栏面板

  12. 12

    动画渐变背景（concept）

  13. 13

    解决方案：动画渐变背景

  14. 14

    交错淡入列表项

  15. 15

    解决方案：交错淡入的列表项

  16. 16

    Shimmer 加载占位符

  17. 17

    解决方案：Shimmer 加载占位符

  18. 18

    圆形页面揭示过渡（concept）

  19. 19

    解决方案：圆形页面揭示过渡

  20. 20

    弹跳小球动画

  21. 21

    解决方案：弹跳球动画

  22. 22

    3D 翻转卡片效果

  23. 23

    解决方案：3D 翻转卡片效果（concept）

  24. 24

    变形的 Blob 背景（concept）

  25. 25

    解决方案：变形的 Blob 背景

  26. 26

    Liquid Button Morph 效果（concept）

  27. 27

    解决方案：Liquid Button Morph 效果

  28. 28

    Glitch 文本动画（concept）

  29. 29

    解决方案：Glitch 文本动画

  30. 30

    3D 旋转图片轮播

  31. 31

    解决方案：3D 旋转图片轮播

Glassmorphism 和视觉深度
  1. 1

    玻璃拟态与视觉深度模式

  2. 2

    Glass Card Component

  3. 3

    解决方案：玻璃卡片组件

  4. 4

    Glass Floating Button

  5. 5

    解决方案：玻璃悬浮按钮

  6. 6

    Glass Header Navbar

  7. 7

    解决方案：玻璃态标题导航栏

  8. 8

    悬停时的玻璃气泡提示

  9. 9

    解决方案：悬停时显示玻璃状提示框

  10. 10

    Glass Search Input

  11. 11

    解决方案：玻璃搜索输入

  12. 12

    Glass Toggle Switch

  13. 13

    解决方案：玻璃切换开关

  14. 14

    Glass Image Gallery

  15. 15

    解决方案：玻璃图像画廊

  16. 16

    Glass Flip Card

  17. 17

    Solution: Glass Flip Card

  18. 18

    Glass Range Slider

  19. 19

    解决方案：玻璃范围滑块

  20. 20

    Glass Accordion Panel

  21. 21

    解决方案：玻璃折叠面板

  22. 22

    Glass 3D Carousel

  23. 23

    解决方案：玻璃 3D 旋转木马

  24. 24

    Glass Responsive Dashboard Cards

  25. 25

    Solution: Glass Responsive Dashboard Cards

  26. 26

    Glass Tabbed Interface

  27. 27

    解决方案：玻璃标签页界面（concept）

  28. 28

    Glass Mega Dropdown Menu

  29. 29

    解决方案：Glass 巨型下拉菜单

自定义表单控件
  1. 1

    自定义表单控件模式

  2. 2

    自定义复选框控件

  3. 3

    解决方案：自定义复选框控件

  4. 4

    自定义单选按钮控件

  5. 5

    解决方案：自定义单选按钮控件

  6. 6

    自定义文件上传按钮

  7. 7

    解决方案：自定义文件上传按钮

  8. 8

    自定义切换开关控件

  9. 9

    解决方案：自定义切换开关控件

  10. 10

    自定义范围滑块控件

  11. 11

    解决方案：自定义范围滑块控件

  12. 12

    自定义选择下拉控件

  13. 13

    解决方案：自定义选择下拉控件

  14. 14

    分段控件切换

  15. 15

    解决方案：分段控制切换

  16. 16

    自定义浮动标签输入

  17. 17

    解决方案：自定义浮动标签输入

  18. 18

    自定义搜索输入控件

  19. 19

    解决方案：自定义搜索输入控件

  20. 20

    带有样式色块的自定义颜色选择器控件

  21. 21

    解决方案：带有样式色块的自定义颜色选择器控件

  22. 22

    三态复选框及不确定状态动画

  23. 23

    解决方案：带有不确定状态动画的三态复选框

  24. 24

    带验证消息的浮动标签输入框

  25. 25

    解决方案：带验证消息的浮动标签输入框

  26. 26

    带响应式刻度标记和标签的范围滑块

  27. 27

    解决方案：带有响应式刻度标记和标签的范围滑块

  28. 28

    带有内联验证图标的自定义电子邮件输入

  29. 29

    解决方案：带有内联验证图标的自定义邮件输入

响应式可见性
  1. 1

    响应式可见性模式

  2. 2

    移动端仅导航菜单切换

  3. 3

    解决方案：仅移动端导航菜单切换

  4. 4

    推广横幅可见性

  5. 5

    解决方案：促销横幅可见性

  6. 6

    博客侧边栏可见性

  7. 7

    解决方案：博客侧边栏可见性

  8. 8

    移动端联系按钮可见性

  9. 9

    解决方案：移动端联系按钮可见性

  10. 10

    页脚社交图标可见性

  11. 11

    解决方案：页脚社交图标可见性

  12. 12

    带侧边栏切换的响应式文章网格

  13. 13

    解决方案：带侧边栏切换的响应式文章网格

  14. 14

    自适应标题Logo与导航可见性

  15. 15

    解决方案：自适应标题Logo与导航可见性

  16. 16

    响应式评价轮播图与网格可见性

  17. 17

    解决方案：响应式评论轮播图与网格可见性

  18. 18

    通知横幅与侧边栏切换

  19. 19

    解决方案：通知横幅和侧边栏切换

  20. 20

    自适应仪表板组件和筛选面板可见性

  21. 21

    解决方案：自适应仪表板小部件和筛选面板可见性

可访问的交互状态
  1. 1

    可访问的交互状态模式

  2. 2

    可访问性按钮聚焦指示器

  3. 3

    解决方案：可访问的按钮焦点指示器

  4. 4

    可访问的输入焦点高亮

  5. 5

    解决方案：可访问的输入聚焦高亮

  6. 6

    可访问的链接聚焦下划线

  7. 7

    解决方案：可访问的链接聚焦下划线

  8. 8

    可访问的复选框焦点环

  9. 9

    解决方案：可访问的复选框焦点环

  10. 10

    可访问的单选按钮焦点

  11. 11

    解决方案：可访问的单选按钮聚焦

  12. 12

    使用 :focus-visible 实现可访问的焦点指示器

  13. 13

    解决方案：使用 :focus-visible 实现可访问的焦点指示器

  14. 14

    可访问的标签导航焦点高亮

  15. 15

    解决方案：可访问的标签导航焦点高亮

  16. 16

    可访问的图标按钮焦点高亮

  17. 17

    解决方案：可访问的图标按钮聚焦高亮

  18. 18

    可访问性卡片聚焦阴影

  19. 19

    解决方案：可访问的卡片聚焦阴影

  20. 20

    可访问的切换开关聚焦环

  21. 21

    解决方案：可访问的切换开关焦点环

  22. 22

    可访问的多按钮组聚焦与游标索引

  23. 23

    解决方案：可访问的多按钮组焦点与游标 tabindex

  24. 24

    可访问的卡片网格，每张卡片具有焦点轮廓

  25. 25

    解决方案：带有每卡片聚焦轮廓的可访问卡片网格

  26. 26

    可访问的自定义单选按钮组，带有可见焦点

  27. 27

    解决方案：具有可见焦点的可访问自定义单选按钮组

  28. 28

    带有键盘焦点高亮的可访问菜单按钮

  29. 29

    解决方案：带有键盘焦点高亮的可访问菜单按钮

  30. 30

    可访问的列表框，带有可见焦点和激活状态

  31. 31

    解决方案：具有可见焦点和激活状态的可访问列表框

自适应全屏区域
  1. 1

    自适应全屏区域模式

  2. 2

    简单自适应全屏英雄区域

  3. 3

    解决方案：简单的自适应全屏英雄区域

  4. 4

    全屏区域，带背景颜色

  5. 5

    解决方案：带背景色的全屏区域

  6. 6

    全屏区域，带有图片背景

  7. 7

    解决方案：带图片背景的全屏区域

  8. 8

    自适应全屏区域，移动端安全高度

  9. 9

    解决方案：自适应全屏区域，移动端安全高度

  10. 10

    全屏区域，带响应式内边距

  11. 11

    解决方案：带响应式内边距的全屏区域

  12. 12

    全屏区域，带滚动指示器

  13. 13

    解决方案：全屏区域带滚动指示器

  14. 14

    全屏区域，包含居中的Logo和副文本

  15. 15

    解决方案：全屏区域，包含居中的徽标和副文本

  16. 16

    全屏区域，最大宽度内容

  17. 17

    解决方案：全屏区域，最大宽度内容

  18. 18

    全屏区域，带渐变叠加

  19. 19

    解决方案：带渐变叠加的全屏区域

  20. 20

    全屏区域，带两行截断的副标题

  21. 21

    解决方案：带夹紧副标题的全屏区域

  22. 22

    全屏区域，底部固定CTA

  23. 23

    解决方案：全屏区域搭配粘性底部 CTA

  24. 24

    全屏区域，采用分栏布局（垂直两等分）

  25. 25

    解决方案：全屏区域，分割布局（垂直两等分）

  26. 26

    全屏区域，包含图片和内容叠加

  27. 27

    解决方案：带图片和内容叠加的全屏区域

  28. 28

    全屏区域，内容对齐

  29. 29

    解决方案：全屏区域与内容对齐

  30. 30

    全屏区域的纯 CSS 轮播效果

  31. 31

    解决方案：仅使用 CSS 实现全屏区域的轮播效果

粘性布局
  1. 1

    粘性布局模式

  2. 2

    基础粘性头部

  3. 3

    解决方案：基础固定头部

  4. 4

    固定侧边栏导航

  5. 5

    解决方案：粘性侧边栏导航

  6. 6

    持久化粘性页脚

  7. 7

    解决方案：持久化粘性页脚

  8. 8

    带有偏移的固定元素

  9. 9

    解决方案：带偏移的固定元素

  10. 10

    固定表头

  11. 11

    解决方案：固定表头

  12. 12

    可滚动容器区域粘性

  13. 13

    解决方案：可滚动容器区域的粘性

  14. 14

    重叠的粘性横幅

  15. 15

    解决方案：重叠的粘性横幅

  16. 16

    嵌套的粘性元素

  17. 17

    解决方案：嵌套的粘性元素

  18. 18

    Responsive Sticky Sidebar

  19. 19

    Solution: Responsive Sticky Sidebar

  20. 20

    CSS Grid Sticky Sidebar and Header

  21. 21

    解决方案：CSS Grid 固定侧边栏和标题

  22. 22

    表格中冻结表头和第一列

  23. 23

    解决方案：在表格中冻结表头和第一列

  24. 24

    固定时间轴年份标签

  25. 25

    解决方案：固定时间轴年份标签

响应式网格与布局
  1. 1

    响应式网格与布局模式

  2. 2

    基础响应式网格布局

  3. 3

    解决方案：基本响应式网格布局

  4. 4

    两栏响应式布局

  5. 5

    解决方案：两栏响应式布局

  6. 6

    响应式图片画廊网格

  7. 7

    解决方案：响应式图片画廊网格

  8. 8

    固定三列响应式网格

  9. 9

    解决方案：固定三列响应式网格

  10. 10

    移动优先的响应式网格

  11. 11

    解决方案：移动优先的响应式网格

  12. 12

    动态网格与命名区域

  13. 13

    解决方案：带有命名区域的动态网格

  14. 14

    响应式仪表盘卡片布局

  15. 15

    解决方案：响应式仪表盘卡片布局

  16. 16

    Masonry 风格响应式网格

  17. 17

    解决方案：Masonry 风格响应式网格

  18. 18

    内容优先的响应式网格

  19. 19

    解决方案：内容优先的响应式网格

  20. 20

    基于宽高比的流式响应网格

  21. 21

    解决方案：具有宽高比元素的流式响应网格

  22. 22

    CSS Grid 复杂嵌套布局

  23. 23

    解决方案：CSS Grid 复杂嵌套布局

  24. 24

    复杂子网格响应式布局

  25. 25

    解决方案：复杂的子网格响应式布局

  26. 26

    响应式月度日历网格

  27. 27

    解决方案：响应式月度日历网格

  28. 28

    非对称杂志风格网格

  29. 29

    解决方案：非对称杂志风格网格

  30. 30

    重叠的英雄图和特性卡片布局

  31. 31

    解决方案：重叠的英雄区块与特性卡片布局

固有尺寸与容器依赖尺寸
  1. 1

    内在尺寸与容器依赖尺寸模式

  2. 2

    流式图片缩放器

  3. 3

    解决方案：流式图片缩放器

  4. 4

    方框填充器

  5. 5

    解决方案：方框填充器

  6. 6

    响应式视频嵌入

  7. 7

    解决方案：响应式视频嵌入

  8. 8

    流体按钮宽度

  9. 9

    解决方案：流体按钮宽度

  10. 10

    响应式背景覆盖

  11. 11

    解决方案：响应式背景覆盖

  12. 12

    最小最大响应式网格画廊

  13. 13

    解决方案：最小最大响应式网格画廊

  14. 14

    自适应卡片组件

  15. 15

    解决方案：自适应卡片组件

  16. 16

    带有容器查询的特性网格

  17. 17

    解决方案：带有容器查询的特性网格

  18. 18

    三面板响应式布局

  19. 19

    解决方案：三面板响应式布局

  20. 20

    自适应配置文件卡片

  21. 21

    解决方案：自适应配置文件卡片

  22. 22

    仪表板小部件布局

  23. 23

    解决方案：仪表盘小部件布局

  24. 24

    自适应推荐语网格

  25. 25

    解决方案：自适应推荐语网格

  26. 26

    自适应数据表

  27. 27

    解决方案：自适应数据表

文本截断与钳制
  1. 1

    文本截断与钳制模式

  2. 2

    单行文本截断

  3. 3

    解决方案：单行文本截断

  4. 4

    多行文本截断

  5. 5

    解决方案：多行文本截断

  6. 6

    网格布局中的响应式文本截断

  7. 7

    解决方案：在网格布局内实现响应式文本截断

  8. 8

    带有提示工具支持的可访问文本截断

  9. 9

    解决方案：支持提示工具的可访问性文本截断

  10. 10

    文本截断用于卡片预览

  11. 11

    解决方案：卡片预览的文本截断

  12. 12

    响应式博客布局中的多行省略号

  13. 13

    解决方案：响应式博客布局中的多行省略符

  14. 14

    文本在 Flexbox 布局中的截断

  15. 15

    解决方案：在 Flexbox 布局中实现文本截断

  16. 16

    在下拉选项列表中截断文本

  17. 17

    解决方案：在下拉选项列表中截断文本

  18. 18

    使用可选“显示更多”按钮夹紧文本

  19. 19

    解决方案：使用可选的“阅读更多”按钮来截断文本

  20. 20

    表格单元格文本截断

  21. 21

    解决方案：表格单元格文本截断

  22. 22

    使用悬停展开行为的行数截断

  23. 23

    解决方案：带有悬停展开行为的行数限制

  24. 24

    多行文本截断在动态尺寸卡片中的应用

  25. 25

    解决方案：在动态大小的卡片中实现多行截断

  26. 26

    文本截断嵌套在 Flexbox 布局中

  27. 27

    解决方案：文本在嵌套的 Flexbox 布局中截断

  28. 28

    多行文本截断无需 -webkit-line-clamp

  29. 29

    解决方案：无需 -webkit-line-clamp 的多行文本截断

  30. 30

    文本截断在双向（RTL 和 LTR）布局中的应用

  31. 31

    解决方案：在双向（RTL 和 LTR）布局中实现文本截断

排版与垂直节奏
  1. 1

    排版与垂直节奏模式

  2. 2

    Baseline Grid Builder

  3. 3

    解决方案：基线网格生成器

  4. 4

    段落节奏设定器

  5. 5

    解决方案：段落节奏设定器

  6. 6

    引用块节奏样式器

  7. 7

    解决方案：引用块节奏样式器

  8. 8

    通用节奏应用

  9. 9

    解决方案：通用节奏应用工具

  10. 10

    表单字段节奏强制器

  11. 11

    解决方案：表单字段节奏强制器

  12. 12

    Modular Scale Fluid Typography

  13. 13

    解决方案：模块化比例流体排版

  14. 14

    基于变量的排版尺度

  15. 15

    解决方案：基于变量的排版尺度

  16. 16

    Fluid Vertical Rhythm

  17. 17

    解决方案：流体垂直节奏

  18. 18

    Section Margin Collapse Fixer

  19. 19

    解决方案：章节边距折叠修复器

  20. 20

    Grid Gap Rhythm Layout

  21. 21

    解决方案：网格间距节奏布局

  22. 22

    基于上下文感知的节奏与容器查询

  23. 23

    解决方案：使用容器查询实现上下文感知的节奏

  24. 24

    Container-Responsive Rhythm Adapter

  25. 25

    解决方案：容器响应式节奏适配器

  26. 26

    多断点节奏调音器

  27. 27

    解决方案：多断点节奏调音器

  28. 28

    嵌套网格子网格节奏

  29. 29

    Solution: Nested Grid Subgrid Rhythm

流体和响应式排版
  1. 1

    流体与响应式排版模式

  2. 2

    Fluid Heading Resize

  3. 3

    Solution: Fluid Heading Resize

  4. 4

    流式段落文本

  5. 5

    解决方案：Fluid Paragraph Text

  6. 6

    Fluid Button Label

  7. 7

    解决方案：流体按钮标签

  8. 8

    Fluid Caption Text

  9. 9

    解决方案：Fluid Caption Text

  10. 10

    Fluid 导航链接文本

  11. 11

    解决方案：Fluid 导航链接文本

  12. 12

    Fluid Modular Scale with CSS Variables

  13. 13

    解决方案：使用 CSS 变量的 Fluid Modular Scale

  14. 14

    Fluid Hero Heading and Subheading

  15. 15

    解决方案：Fluid Hero 标题和副标题

  16. 16

    使用比例倍数实现流体排版

  17. 17

    解决方案：使用比例倍数实现流体排版

  18. 18

    Fluid Heading Letter-Spacing

  19. 19

    解决方案：流体标题字间距

  20. 20

    Fluid Paragraph Line-Height

  21. 21

    解决方案：Fluid Paragraph Line-Height

  22. 22

    使用旧版回退的高级流体字体缩放

  23. 23

    解决方案：带有旧版回退的高级流体类型比例

  24. 24

    使用 CSS 容器查询实现流体排版

  25. 25

    解决方案：使用 CSS 容器查询实现流体排版

  26. 26

    基于视口的流体排版（带高度约束）

  27. 27

    解决方案：基于视口的流体排版，带高度约束

  28. 28

    Fluid Vertical Rhythm System

  29. 29

    解决方案：流式垂直节奏系统

  30. 30

    多范围流体排版与媒体查询覆盖

  31. 31

    解决方案：使用媒体查询覆盖实现多范围流体排版

课程总结
  1. 1

    结论

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)