回到所有的课程
课程库

列表

使用List元素创建内容的编号或项目符号列表。

本视频采用了旧的用户界面。更新版本即将到来!

list元素可用于创建编号或项目符号列表。

在这节课中:

  1. 添加一个列表
  2. 设置列表类型
  3. 向列表中添加内容
  4. 样式列表

添加一个列表

List元素图标。

若要向站点添加列表元素,请单击添加面板(快捷键:A),拖动A列表放到Webflow画布上。

在左图中,list元素在Add面板中高亮显示。在右图中,画布中显示了一个列表。

列表由主元素和三个列表项组成。

一个列表及其三个列表项显示在Navigator中。

设置列表类型

根据设置,主列表元素将是无序项目符号列表或命令(编号)列表。默认情况下,列表被设置为无序,这将在每个列表项的左侧显示项目符号。你可以在有序列表和无序列表之间切换两种方式:

  1. 选择主列表元素并按输入
  2. 选择主列表元素并转到设置面板>列表设置,然后改变类型
无序和有序类型在列表设置中突出显示。

您还可以通过选择删除列表设置中的项目符号和数字没有子弹

无符号样式在列表设置中高亮显示。

向列表中添加内容

根据设计,列表项没有任何默认内容。这是因为列表项可以包含许多不同类型的内容—标题、段落、图像、视频,甚至其他列表。若要向列表添加内容,只需将其拖动到列表项中。如果您只需要纯文本,还可以在列表项中双击开始键入。进入文本编辑模式的另一种方法是选择列表项并按输入/返回

在上图中,一个图像被添加到无序列表的第一个列表项中。在下面的图片中,单词“Amazing”,“Wonderful”和“Spectacular”被添加到一个无序列表的三个列表项中。

嵌套列表

可以通过在列表中添加列表来嵌套列表(你不能嵌套列表元素).

在列表项内嵌套列表。

将列表嵌套到列表项中:

  1. 拖一个列表添加面板到画布上
  2. 窝一个孩子列表在父类的列表项中列表
  3. 在父元素的列表项中嵌套一个文本元素(段落、文本块、标题等)列表元素,上面的子元素列表
注意:在向列表项添加文本之前,请确保已创建嵌套列表的结构。在父列表项被编辑之后,嵌套列表不能放在父列表项中(尽管您可以添加元素到父列表项,然后仍然在里面嵌套子列表)。
带注释的项目列表和文本元素嵌套在编号列表的第一个列表项中。
在Navigator中,列表元素和段落元素嵌套在父列表元素的第一个列表项中。

创建新的列表项

若要创建新的列表项,请选择现有的列表项并复制和粘贴。或者,您可以右键单击列表项并选择重复的从菜单中。

右键单击列表项后出现的菜单中会突出显示Duplicate选项。

样式列表

可以使用“样式”面板对列表和列表项进行样式设置。

列表

主列表元素(有序和无序列表元素)可以通过创建类或对标记设置样式来设置样式。当你设计所有的有序列表标签或所有的无序列表标记时,您将在整个站点中为这些元素定义默认样式。

  1. 选择的主要列表元素
  2. 开放风格的面板>选择字段
  3. 选择所有的有序列表(或所有的无序列表
  4. 定制您的风格
所有无序列表标记在样式面板的选择器下拉框中高亮显示。

通过选择列表并调整,可以增加或减少项目符号(或数字)所在的空间左填充

在左图中,52个像素的左填充被添加到画布上的三个列表项中。在右图中,样式面板的Spacing部分显示了52个像素的左侧填充。

列表项

可以对所有列表项应用相同的类,使它们具有一致的外观。改变是很常见的底部边距在列表项和左边框在文本和项目符号或数字之间留出空间。

一个“主要列表项”类被添加到一个列表项中,并显示在Selector字段中。

控件可以对整个站点的所有列表项设置默认样式所有的列表项标签:

  1. 选择一个列表项
  2. 开放风格的面板>选择字段
  3. 选择所有的列表项标签
  4. 添加样式
注意:改变了所有的列表项标记将影响所有列表项,无论它们是在有序或无序列表中。
All list items标签被选中并出现在Style面板的Selector字段中。
尝试Webflow——它是免费的
Baidu
map