回到所有的课程
课程库

通过改变元素在不同状态下的外观和行为,为元素添加交互性。

本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目

您可以通过更改元素在不同状态下的外观和行为方式来为元素添加交互性。

在这节课中:

  1. 在各种状态下对元素设置样式
  2. 返回样式化默认状态
  3. 删除处于状态的元素的样式
  4. 设置链接元素的当前状态
  5. 了解风格是从哪里继承来的

在各种状态下对元素设置样式

要对一个处于不同状态的元素应用不同的样式,比如悬停状态,在样式面板的选择器中打开状态下拉菜单,选择你想要样式的状态。

状态下拉菜单包括无、悬停、按下和聚焦状态选项。样式面板的选择器部分突出显示下拉菜单。

当您从选择器中的状态下拉菜单中选择一个状态时,一个绿色的状态类,也称为伪类,将出现在选择器字段的末尾。这表明您现在对元素的状态进行了样式化。

选中一个按钮元素,并在选择器部分显示一个绿色的悬停类状态。

您可以做出任意数量的样式选择。您在这里所做的样式更改是用户在与该元素交互时将看到的。

无论您处于何种状态,您所做的更改都将在画布上显示,直到取消选择或以其他方式离开该状态。

状态菜单(下拉菜单)

从下拉菜单中选择要样式的状态。现在,在Style面板中所做的任何更改都将保存为所选状态。

没有一个国家

None状态是元素的默认状态。这是元素默认的外观。

一旦选择并设置了另一种状态的样式,就可以通过从States下拉菜单中选择“none”来恢复默认状态的样式。

悬停状态

当您将鼠标指针悬停在一个元素上时,悬停状态显示。在大多数触屏设备上不可能悬停,所以在设计小型设备时要意识到这一点断点

按下状态

按下或激活状态是单击或按下元素时显示的状态。这个状态继承了悬停状态的样式,因为按下按钮实际上是悬停状态的一种状态。

集中状态

您可以专注于某些交互元素,如按钮和链接,而无需使用键盘tab进入它们。用鼠标或指针设备点击交互元素可以聚焦并激活它们。这个状态模拟了当一个交互元素通过键盘、鼠标或手指点击聚焦时的状态。

集中(键盘)状态

与聚焦状态一样,这种状态模拟的是当一个交互元素被聚焦但不一定被激活时(例如,用键盘切换到元素)。请注意,当聚焦时,它总是适用于文本输入字段,无论它们以何种方式聚焦(例如,用鼠标、键盘等)。

为了让那些依赖键盘进行导航的访问者更容易访问您的站点,对这种状态进行样式化,使交互元素的位置在页面上很明显是很重要的。我们建议设定互动元素的大纲因为它不会影响元素的布局。

参观了国家

访问状态是已访问的链接的状态。这个状态继承了none状态的样式。

对于访问的州,您只能设置文本颜色、背景颜色和边框颜色的样式。背景颜色只有在已经设置为不同状态时才会出现。

占位符

此状态将在States下拉菜单中提供表单字段.它允许您将占位符文本与继承默认状态的排版样式的类型化文本分开设置样式。

对于占位符文本,可以设置排版、背景和阴影的样式。

左边的第一步,选择表单的输入字段。在右边的第二步,从下拉状态菜单中选择占位符状态。
在表单中选择一个输入字段,然后在Selector中打开States下拉菜单来设置占位符的样式。
检查状态

这种状态将在表单复选框和单选按钮的状态下拉菜单中可用,这些复选框和单选按钮在它们的元素设置中启用了自定义样式。它允许您对复选框或单选按钮的选中状态设置样式。

返回样式化默认状态

当你完成了状态的样式化后,你可以通过以下操作返回到默认的none状态:

  • 从状态下拉菜单中选择“None”
  • 按下键盘上的ESC键(这也取消选择当前元素)
  • 选择不同的元素

删除处于状态的元素的样式

从一个状态中删除自定义样式或所有样式:

  1. 选择的元素
  2. 从States下拉菜单中选择状态
  3. 删除任何样式(蓝色)

设置链接元素和选项卡的当前状态

链接元素也有一个当前状态。当您在Current状态上添加自定义样式时,它将反映用户处于该状态时link元素的外观。

当前状态(选择器中的绿色标签)

“当前”状态自动添加到“所有链接”标记或的选择link元素当此元素链接到当前页、节或选项卡时。

一个链接元素被选择时,当前状态在选择器部分被选择。有3个选择器被继承。link元素有一个名为Logo block的类。

当前状态从默认的“None”状态继承所有样式。

选择链接的当前状态

访问任意的当前状态连接块文字链接按钮导航链接

  1. 选择链接元素并按D键打开链接设置
  2. 选择页面选项,从下拉菜单中选择当前页面(如果链接在主页上,则选择主页)
  3. 按S转到样式面板。如果您对链接应用了一个类,您将看到选择器字段中绿色的当前状态被激活。如果不是,单击选择器,并从打开的下拉列表中选择“所有链接”标签。当前状态也将应用于标记。
在左边的第一步,选择一个链接元素。步骤二在右侧,从链接设置页面下拉菜单中选择主页,将该元素链接到主页。
在左边的第三步,当链接元素仍然被选中时,从下拉菜单中选择All Links标签。在右边的第四步,注意一个绿色的“current”状态已经被添加到All Links标签。
一个称为导航项的导航链接在继承三个选择器的选择器部分中包含一个当前状态。


您也可以在链接设置中选择页面部分选项。当您滚动到页面的该部分时,当前状态将出现在该元素的选择器字段中。这对于样式的按钮或者滚动时固定的链接。

设置当前状态样式后,可以更新链接设置,并将按钮和链接元素链接到任何其他页面或页面部分。

选择选项卡的当前状态

您可以选择使Current选项卡的样式与普通选项卡不同,以区分活动选项卡和非活动选项卡。例如,可以编辑字体颜色和背景颜色,使其与普通选项卡不同。

设置当前选项卡的样式:

  1. 选择活动的标签链接
  2. 给它分配一个类。“当前状态”将自动出现。
  3. 风格了

当当前状态指示器在选择器中显示时,对链接的默认状态进行样式化

当您想设置默认状态的样式时,有几种方法可以删除当前状态。最快的方法是在Inheritance菜单中选择默认的基类。

在继承下拉菜单中突出显示了名为Navigation item的链接元素的默认基类。橙色的3选择器标签也在继承指示器中高亮显示。

或者,您可以暂时删除元素设置面板中的链接设置,样式链接的类,然后重新配置链接设置。如果你不希望删除链接设置,复制link元素,删除重复元素上的链接设置,编辑类,然后在你完成后删除重复的元素。

了解风格是从哪里继承来的

所有状态都从“none”状态继承样式。“按下”也继承了“悬停”状态的样式。您可以通过单击选择器字段上方的继承指示符来查看样式是从哪里继承的。

继承指示符被突出显示,显示从5个选择器继承样式。继承下拉菜单也突出显示了不同的状态。

在您为状态添加样式之后,状态菜单下拉图标将变成蓝色。当你打开States下拉菜单时,你会看到蓝色的圆圈,表示在那个州有本地样式。

一个名为Nav link的链接元素当前处于“当前”和“按下”状态。一个朝下的胡萝卜图标高亮显示状态下的下拉菜单,鼠标悬停和按下状态上有一个蓝点指示器。悬停和按下状态用蓝色指示器高亮显示。


尝试Webflow——它是免费的
Baidu
map