回到所有的课程
课程库

部分

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

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

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

在这节课中:

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

添加一个部分

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

同样在默认情况下,section内部没有填充。如果不希望内容跨越主体的宽度,请将容器保持元素在页面的中心位置。

专家提示:要有一个好的,一致的网站结构,在主体元素中添加章节,然后将你的内容组织在放置在这些章节中的容器中。

风格一段

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

组合类

Combo类允许您添加组合样式并基于原始的section类-您可以覆盖样式并在Combo类之上添加样式。

如果你对原始的部分做了一个更改-你会看到这个更改传递给该部分的所有实例(只要它没有被combo类覆盖)。

你也可以在combo类上重写。在设计和开发另一个Section时,可以添加原始的Section类。

汽车的高度

在向Section添加文本和媒体时,高度将更改以定义高度。无论您添加了多少内容,Section高度都与里面的内容保持一致。

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

最小的高度

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

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

使用flexbox来集中内容

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

视口高度(vh)

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

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

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

专业技巧:设置你的section的显示设置为flex将容器及其内容垂直居中于截面内。

添加3 d视角

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


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


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

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


较高的儿童视角值是一个平坦的效果,就像相机用长焦镜头指向远处的物体,而较低的值就像用广角镜头靠近物体。

子透视图将Section之类的元素转换成类似于相机的效果,为它的任何子元素(层次结构中较低的任何子元素)启用3D效果。

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

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