回到所有的课程
课程库

部分

使用分段来创建单独的内容块,并将页面分成有意义的段。

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

section是一个布局元素,宽度为100%,横跨整个浏览器窗口的宽度。章节在页面的结构和布局中扮演着重要的角色。section允许您创建单独的内容块,并将页面划分为有意义的段。

在这节课中:

  1. 添加一个部分
  2. 风格一段
  3. 最小的高度
  4. 窗口的高度
  5. 添加3 d视角

添加一个部分

你可以添加一个部分元素添加到页面元素面板(A).默认情况下,Section将横跨正文的整个宽度。

默认情况下,section内部也没有填充。如果不希望内容跨越正文宽度,请将容器使元素保持页面居中。

专家提示:要有一个良好的、一致的网站结构,在body元素中添加部分,然后在这些部分中的容器中组织你的内容。

风格一段

Section的高度会根据其内容自动调整—当添加元素时,Section会变高。您还可以在样式面板中设置特定的高度。

组合类

Combo类允许您添加组合样式,并且是基于原始节类的-您可以重写样式并在Combo类的顶部添加样式。

如果您对原始部分进行更改—您将看到更改传递到该部分的所有实例(只要它没有在combo类上被重写)。

您还可以重写combo类。在设计和开发另一个Section时,可以添加原始Section类。

汽车的高度

当您向Section添加文本和媒体时,高度将更改以定义高度。无论添加了多少内容,Section高度都尊重其中的内容。

Section的填充也会影响它的高度。最好的做法是设置Section的顶部和底部填充,并添加内容让它相应地调整。

最小的高度

要设置Section的特定高度,最好设置一个最小高度(例如500px),这样Section就可以随着它的内容展开。

如果你设置了一个正常的高度,内容最终会溢出或被切断。

使用flexbox来居中内容

将容器放在Section中,选择Section,并将其设置为flex.然后你可以垂直居中它的子元素(垂直居中容器)。

视口高度(vh)

在某些情况下,比如在创建英雄Section时,你可以给Section一个特定的高度。在这种情况下,使用viewport高度(vh)单位来指定Section高度。

例如,100年vh将填充100%的视口高度。设置它50 vh将填充视口高度的50%,以此类推。

了解可以在元素上设置的不同宽度和高度单位的更多信息。

专业技巧:设置你的区域的显示设置为flex使容器和它的内容垂直居中。

添加3 d视角

如果你有一个Section的子元素(Section内的任何元素,即使它们位于Section内的其他元素内),你可能想要在3D空间中添加旋转或移动。如果每个元素都应用了相同的类,您将一次对它们进行样式设置。


你添加一个3D变换,任何类型的3D移动看起来都有点平坦(这是因为它是一个等距投影,我们可能想要的效果是透视投影)。


要演示透视投影,请保持旋转状态,并启用3D相机效果。

选择Section后,单击Transform设置并添加一个Child透视图(影响子元素的透视图)。


对儿童来说,更高的视角值是一种更平的效果,就像相机用长焦镜头对准远处的物体一样,而更低的视角值则像是用广角镜头更接近物体一样。

子视角将Section这样的元素变成类似于摄像机的效果,为它的任何子元素(任何层次结构中较低的子元素)启用3D。

以上就是Webflow设计器中Sections的概述。不错的工作!

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