Logo
☆☆☆☆☆
0.0
Beginner
10h

CSS 完全进阶指南

我的目标是带你从一名初学者（或中级用户）成长为你认识的最出色的CSS开发者之一！ 👉🏻 课程内容？ 1. 深入解析CSS基础 2. 实用的SVG应用技巧 3. 一份清晰易懂的响应式设计指南 4. 使用CSS动画与过渡打造精致界面 5. 编写可维护的CSS及大规模项目中的CSS实用技巧 6. 通过实战项目学习CSS Grid —— 等等，猜猜看是什么？😉 7. 获得专属Slack邀请，随时向我提问 8. 扎实掌握CSS核心基础知识 9. 动手完成实用项目 10. 包括Flexbox、变量、渐变、背景、响应式图片、高效开发工具等众多实用内容！ 👉🏻 学习要求？ 本课程不假设你有任何CSS基础 👉🏻 适合人群？ 1. 希望提升前端设计能力的后端工程师 2. 渴望打造精美应用的初学者开发者 3. 任何希望深入理解CSS内部机制、从而脱颖而出的工程师 准备好了吗？立即升级你的技能！

19 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
View Courses in Subscription
CSS 完全进阶指南
我的目标是带你从一名初学者（或中级用户）成长为你认识的最出色的CSS开发者之一！ 👉🏻 课程内容？ 1. 深入解析CSS基础 2. 实用的SVG应用技巧 3. 一份清晰易懂的响应式设计指南 4. 使用CSS动画与过渡打造精致界面 5. 编写可维护的CSS及大规模项目中的CSS实用技巧 6. 通...

Content

19 Lessons • 0 Quizzes • 0 Challenges

简介
  1. 1

    我编写本课程的原因

  2. 2

    如何充分利用本课程

  3. 3

    遇到困难时该怎么办

  4. 4

    你将在这门课程中学到的内容

  5. 5

    加入 Slack 社区

开始学习 CSS
  1. 1

    入门：循序渐进

  2. 2

    CSS 规则的工作原理

  3. 3

    多重声明与注释

哦我的选择器！
  1. 1

    CSS 选择器快速入门

  2. 2

    后代选择器与伪类选择器

  3. 3

    选择元素的最佳实践

  4. 4

    最后再看一下 CSS 选择器

CSS 基础知识每个人都应该了解
  1. 1

    默认浏览器样式如何影响文档

  2. 2

    CSS 中的层叠与继承概念

  3. 3

    理解 CSS 中的顺序与优先级

颜色，颜色，颜色！
  1. 1

    理解 CSS 中的颜色

  2. 2

    实用色彩工具

我们都需要单位
  1. 1

    理解 CSS 中的单位

  2. 2

    像素

  3. 3

    点和派卡

  4. 4

    Ems

  5. 5

    EM单位的问题。

  6. 6

    rem（根 em）

  7. 7

    ex 单位

  8. 8

    百分比

  9. 9

    vh 和 vw

  10. 10

    vmin 和 vmax

CSS 中的排版
  1. 1

    从 CSS 中的字体开始

  2. 2

    字体堆栈

  3. 3

    衬线字体和无衬线字体

  4. 4

    等宽字体、手写体和幻想体

  5. 5

    5个你应该知道的字体技巧

盒模型
  1. 1

    介绍盒模型

  2. 2

    盒模型实例讲解

  3. 3

    内边距区域

  4. 4

    边框

  5. 5

    边距区域

  6. 6

    实战：应用内边距和外边距

挑战：文本、边距、内边距与边框的实践练习
  1. 1

    引入挑战

  2. 2

    问题

  3. 3

    解决方案

背景的创意运用
  1. 1

    开始使用背景图片

  2. 2

    重复还是不重复？

  3. 3

    背景图片的尺寸调整

  4. 4

    使用关键字设置背景大小

  5. 5

    使用长度单位设置背景大小

项目：构建一个电影详情页面
  1. 1

    我们将构建的内容

  2. 2

    初始样式

  3. 3

    规划与调查

  4. 4

    理解盒模型尺寸

  5. 5

    修复我们的UI问题

  6. 6

    背景位置的工作原理

  7. 7

    如何在 CSS 中设置背景位置

  8. 8

    背景简写属性

  9. 9

    最终润色

理解CSS渐变
  1. 1

    引入渐变

  2. 2

    线性渐变

  3. 3

    渐变就是背景图片！

  4. 4

    线性渐变的方向与颜色停靠点

动手实践渐变
  1. 1

    问题：带有渐变的法国国旗

  2. 2

    解决方案：带有渐变的法国国旗

  3. 3

    问题：带有渐变效果的德国国旗

  4. 4

    解决方案：带有渐变的德国国旗

  5. 5

    问题：刚果共和国旗帜带渐变效果

  6. 6

    解决方案：刚果共和国国旗

项目：为一家初创公司构建一个注册页面
  1. 1

    简介

  2. 2

    文档结构的正确性

  3. 3

    初始样式

  4. 4

    Flexbox 快速入门

  5. 5

    网络字体、圆角边框和圆角图片

  6. 6

    最后的步骤

像教五岁小孩一样教我定位
  1. 1

    简介

  2. 2

    开始项目

  3. 3

    处理 CSS 生成的内容

  4. 4

    你从未有过的CSS定位课程

  5. 5

    将定位策略付诸实践

  6. 6

    使用 box-shadow 构建真实的 CSS 效果

  7. 7

    我从不满足。你呢？

深入解析 CSS 变量（又称自定义属性）
  1. 1

    简介

  2. 2

    你将学到的内容

  3. 3

    开始学习变量

  4. 4

    使用 CSS 变量

  5. 5

    值得提及的特性

  6. 6

    常见错误与陷阱

  7. 7

    浏览器支持怎么样？

{新} CSS 变量的实际应用
  1. 1

    使用 CSS 变量创建组件变体

  2. 2

    使用 CSS 变量创建主题网站

  3. 3

    构建 CSS 变量展示台

永远的 CSS 网格
  1. 1

    简介

  2. 2

    你应了解的基本 CSS Grid 术语

  3. 3

    CSS 网格，入门第一步

  4. 4

    动手编码 —— CSS Grid，实践入门

  5. 5

    通过网格区域命名和定位项目

  6. 6

    网格区域放置

  7. 7

    响应式设计——使用媒体查询重新定义网格区域

  8. 8

    将内容放置在网格中

  9. 9

    让 CSS Grid 与 Flexbox 协同工作

  10. 10

    结论

最后的话
  1. 1

    实际应用案例

  2. 2

    接下来该去哪里

  3. 3

    我能为你做的一件事

  4. 4

    结束

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)