CSS样式

从21天的投资组合挑战开始新的一年

中间
1小时30分钟

CSS为站点上的内容(HTML)设置样式提供了大量的选项——但是当你刚刚开始使用这些样式时,想要理解它们可能会很困难。本课程将介绍您可以在设计中使用的不同CSS样式选项,并向您展示如何使用Webflow可视化地应用它们。

仔细看看CSS提供的所有有创意的样式可能性。学习如何使用Webflow的强大功能可视化地设置元素样式。

暂停背景视频
Webflow对学生和教育者是免费的
了解更多并应用

总结

课程进度

干得好,我们做了一些时间旅行到未来,看起来太棒了!

0

完成

0
30.

课程完成

CSS为站点上的内容(HTML)设置样式提供了大量的选项——但是当你刚刚开始使用这些样式时,想要理解它们可能会很困难。本课程将介绍您可以在设计中使用的不同CSS样式选项,并向您展示如何使用Webflow可视化地应用它们。

所面临的挑战

挑战
一天
做一个网站英雄
01
终极导航栏
02
神奇的CMS布局
03
制定领导和科学
04
站点的虚拟鞋子
05
你好,这是响应能力
06
展示你的项目页面
07
项目页面可以在任何地方工作
08
最佳联系页面
09
给我们展示你的联系页面
10
测试你的Open Graph设置
11
放一盏灯
12
让你的作品集生动起来
13
失去了,但从未忘记
14
有密码保护
15
实践的可访问性
16
分享你正在进行的设计
17
准备,设置,发布!
18
投资组合验证
19
更新CMS
20.
展示你的作品集
21

准备好获得认证了吗?

完成Webflow专家认证课程后,您就可以进入成为Webflow专家的下一步了。请注意:通过专家考试并不保证进入Webflow专家计划。

参加Webflow专家考试

课程大纲

开始
交互
响应设计
排版样式
背景和边框样式
3 d风格
影响
颜色

CSS样式

30.
教训
开始
开始
交互
交互
响应设计
响应设计
排版样式
排版样式
背景和边框样式
背景和边框样式
3 d风格
3 d风格
影响
影响
颜色
颜色

样式面板概述

成绩单
阅读全文
阅读全文

HTML标记

在Webflow中,HTML标记为我们提供了一种简单的方法来控制特定元素的默认样式,而无需创建唯一的类。例如,您可以通过编辑all段落标记为所有段落定义默认样式。添加带有样式的类将覆盖这些默认样式。

成绩单
阅读全文
阅读全文

对每一个元素进行手动风格的更改既繁琐又耗时。连续数小时输入重复的值,然后尝试一个一个地更新这些值可能会令人沮丧。类保存样式信息,您可以将其应用于整个站点中任意数量的元素。

成绩单
阅读全文
阅读全文

样式管理器

使用样式管理器重命名、清理和搜索类和标记。

成绩单
阅读全文
阅读全文

文本样式继承概述

在Webflow中,就像在代码中一样,元素将它们的排版样式信息传递给它们的子元素。你可以在父元素上设置文本样式,这些样式会层叠下来,你可以在它们的子元素上覆盖这些样式。

通常使用这种技术来设置Body标签上的全局字体样式、对齐部分中的文本和其他元素以及覆盖默认的链接块样式。在本文中,我们将介绍三个文本样式级联如何工作的示例:

  1. 从body标签
  2. 来自Webflow的section元素
  3. 从Webflow的链接块
成绩单
阅读全文
阅读全文

要向Webflow中的元素添加一些交互性,可以使用状态更改它们的外观和行为方式。当您对元素进行样式化时,单击States菜单允许您在各种状态之间切换,如悬停和按下,您可以访问和样式化。

在这个视频中,我们将解释你可以为任何元素设置样式的四种状态:

  1. 没有一个
  2. 徘徊
  3. 按下
  4. 集中
  5. 集中(键盘)

然后向您展示如何样式化这些状态以指示交互性。然后,我们将深入研究如何应用转换来平滑从一个状态到另一个状态的变化,最后,讨论“当前”状态,它是导航链接的一个方便指示器。

成绩单
阅读全文
阅读全文

断点

使用Webflow的7个内置的响应中断点为小屏幕和大屏幕定制设计。

背景

在元素上设置背景可以控制外观和易读性。在背景部份风格的面板,您可以添加背景图像、渐变或颜色到大多数元素(除了媒体元素,如视频和图像)。

3D移动和视差

在本文中,我们将介绍web上的一些基本3D概念。查看2D和3D转换指南学习如何将这些概念应用到您的Webflow项目中。

覆盖元素的默认游标

排版

考虑到搜索引擎和可访问性来编排文本。

需求

  • 免费(或付费)Webflow帐户-报名
  • Chrome或Safari浏览器
克隆此项目
使用此版本克隆完成的项目
克隆此项目
没有页面限制的空白页面

相关的课程

还会有更多

我们很快就会推出更多课程。注册以便提前访问额外的Webflow课程和课程。

哎呀,哪里出问题了。稍后再试,伙计。
Baidu
map