Logo
☆☆☆☆☆
0.0
Intermediate
26h

Modern CSS with Tailwind

本课程探讨并解释了使用 Tailwind CSS 设计网页的行业最佳实践。我们将从单个元素的排版开始,然后进入“盒子”——每个元素在网页上占据的空间矩形,以及如何操作它。一旦我们的元素被放入盒子中,我们将使用 flexbox 和网格布局来查看页面布局。

11 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
Modern CSS with Tailwind
本课程探讨并解释了使用 Tailwind CSS 设计网页的行业最佳实践。我们将从单个元素的排版开始,然后进入“盒子”——每个元素在网页上占据的空间矩形,以及如何操作它。一旦我们的元素被放入盒子中,我们将使用 flexbox 和网格布局来查看页面布局。

WHAT YOU'LL LEARN

无需离开您的 HTML,即可快速轻松地构建现代网站。

Content

11 Lessons • 0 Quizzes • 0 Challenges

简介
  1. 1

    为什么选择 Tailwind

  2. 2

    关于本课程

使用 Tailwind 入门
  1. 1

    快速入门

  2. 2

    添加 Tailwind 功能

  3. 3

    在 Tailwind 上自测

结论
  1. 1

    接下来是什么?

  2. 2

    恭喜

Tailwind Basics
  1. 1

    Tailwind

  2. 2

    实用类

  3. 3

    Preflight

  4. 4

    重复

  5. 5

    使用 @apply 避免重复

  6. 6

    前缀

  7. 7

    Retro Designs:简介

  8. 8

    自我测验:Tailwind 基础知识

附录
  1. 1

    安装 Tailwind

  2. 2

    Typography 插件

字体排版
  1. 1

    大小和形状

  2. 2

    颜色和不透明度

  3. 3

    对齐与间距

  4. 4

    Tailwind Forms

  5. 5

    复古设计:字体样式

The Box
  1. 1

    Box

  2. 2

    Padding 和 Margins

  3. 3

    边框

  4. 4

    背景样式

  5. 5

    渐变(concept)

  6. 6

    背景图片

  7. 7

    图像特征

  8. 8

    复古设计:盒子

  9. 9

    Quiz Yourself on Typography and Box

页面布局
  1. 1

    布局功能

  2. 2

    Tables

  3. 3

    Grids

  4. 4

    Span

  5. 5

    Flexbox

  6. 6

    Order and Wrap

  7. 7

    盒对齐

  8. 8

    Retro Designs:页面布局

  9. 9

    自我测验:页面布局

动画
  1. 1

    简单动画

  2. 2

    动画属性

  3. 3

    复古设计:动画

  4. 4

    对自己关于动画的知识进行测验

响应式设计
  1. 1

    Tailwind 屏幕宽度和断点

  2. 2

    根据屏幕尺寸隐藏元素

  3. 3

    在较大设备上使用 Flex

  4. 4

    响应式设计测验

自定义 Tailwind
  1. 1

    自定义与配置文件基础

  2. 2

    屏幕宽度

  3. 3

    默认颜色

  4. 4

    间距

  5. 5

    更改生成的类

  6. 6

    前缀一览

  7. 7

    声明变体

  8. 8

    从 JavaScript 访问 Tailwind

  9. 9

    Purge CSS

  10. 10

    在自定义 Tailwind 上进行自我测验

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)