Logo
☆☆☆☆☆
0.0
Intermediate
6h

掌握 CSS 的最新特性

掌握CSS是前端开发或全栈开发者的基本要求。这是一门复杂的领域,浏览器兼容性常常带来挑战。CSS工作组会定期更新CSS规范,增加更多功能,使网页样式设计更加简便,并创造出令人兴奋的学习体验。 本课程中,你将学习布局与响应式设计中的多个新属性和选择器。接着,你将了解:has()选择器和容器查询及其应用场景。最后,你将学会在不使用媒体查询的情况下创建响应式布局。课程全程将讨论每个新特性的浏览器兼容性。 完成本课程后,你将具备实际应用能力,仅用少量代码即可创建响应式布局和引人入胜的用户交互体验。你可以用更少的代码实现更多功能,高效运用多项新属性和选择器。这一技能将帮助你打造出色的用户体验。

6 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
掌握 CSS 的最新特性
掌握CSS是前端开发或全栈开发者的基本要求。这是一门复杂的领域,浏览器兼容性常常带来挑战。CSS工作组会定期更新CSS规范,增加更多功能,使网页样式设计更加简便,并创造出令人兴奋的学习体验。 本课程中,你将学习布局与响应式设计中的多个新属性和选择器。接着,你将了解:has()选择器和容器查询及其应...

WHAT YOU'LL LEARN

通过使用CSS的新特性来动手实践创建响应式布局

Content

6 Lessons • 0 Quizzes • 0 Challenges

入门
  1. 1

    课程简介

你错过的 CSS 亮点
  1. 1

    新属性和增强属性

  2. 2

    新和扩展的选择器

  3. 3

    元素样式的优化

  4. 4

    布局和滚动行为的新属性与更新

  5. 5

    现代响应式设计特性

  6. 6

    CSS组织方式的范式转变

  7. 7

    挑战:新闻订阅表单

  8. 8

    解决方案:新闻通讯订阅表单

  9. 9

    测验:你在CSS中遗漏了什么

使用 :has() 选择器来扩展可复用组件
  1. 1

    关于 :has() 选择器的新特性概述

  2. 2

    关于 :has() 选择器的简介

  3. 3

    :has 选择器的局限性

  4. 4

    使用 :has() 选择器实现主动的组件样式设计

  5. 5

    Hero 组件的其他网格布局

  6. 6

    使用数量查询更改网格布局

  7. 7

    今天安全地使用 :has() 选择器

  8. 8

    挑战:按钮设计变体

  9. 9

    解决方案:按钮设计变体

  10. 10

    测验:使用 :has() 选择器来扩展可复用组件

容器查询的实际应用
  1. 1

    容器查询与视口媒体查询

  2. 2

    定义容器查询

  3. 3

    升级卡片组件

  4. 4

    容器查询与流体排版

  5. 5

    构建具有韧性的组件

  6. 6

    协调组件各部分的可见性

  7. 7

    使用命名容器进行定向查询

  8. 8

    容器样式查询

  9. 9

    容器查询的支持与未来

  10. 10

    挑战:让按钮响应式设计

  11. 11

    解决方案:让按钮响应式设计

  12. 12

    测验:容器查询的实际应用

无需媒体查询的响应式 CSS 布局
  1. 1

    响应式设计概述

  2. 2

    响应式间距

  3. 3

    间距与布局间距

  4. 4

    响应式布局

  5. 5

    使用网格和弹性盒子实现响应式布局

  6. 6

    降低布局溢出风险

  7. 7

    响应式容器

  8. 8

    响应式设计技术回顾

  9. 9

    挑战:使用 Flexbox 实现响应式布局

  10. 10

    解决方案:使用 Flexbox 实现响应式布局

  11. 11

    测验:无需媒体查询的响应式 CSS 布局

结论
  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)