使用分段来创建单独的内容块,并将页面分成有意义的段。
事实上,分段是不可低估的强大元素
(Grimur)笑
McGuire Grimur。
[格里姆]不,不,不,继续。
[McGuire]地球可以根据“区域”的力量偏离地轴。
[Grimur]来吧……
(McGuire)我们拍摄。
(格里姆)这只是一部分。
McGuire:不,Grimur。不仅如此。在本课中,我们将讨论,是的,关于添加和样式一个部分(显示其大小由我们放在里面的内容),但我们还将展示如何使用基于像素的最小高度,视口高度创建响应式布局,甚至如何设置你的部分作为一个3D相机。
让我们从添加和样式部分开始。在画布上,我们可以将一个区域拖到页面的任何地方。当我们这样做的时候,有两件事需要注意:默认情况下,Section占用了100%的可用宽度。(这是一个很常见的模式——章节就像书中的章节……它们整齐地组织我们的内容,默认情况下,它们堆叠在另一个上面。)
但要注意的第二件事是,这里有一些占位符空间(看起来有一些高度)。但当我们进入预览,注意它是如何坍塌的。(我们在设计时获得了一些空间,所以我们可以与它交互……但section是有定义的——它们从我们放入的真实内容中获得它们的维度。)
所以当我们放入一个标题之类的东西时?它增加了截面的高度。段落也是一样。或者一个Button(我们可以按Command + E来打开Quick find并输入我们想要的元素)。按Return键?添加按钮,并增加section的高度。
但这部分的名称是添加和样式一个部分。那么我们如何设计样式呢?如果我们从头开始,一个很好的技巧是创建一个类并设置我们的样式—设置一些类似背景颜色的东西。这就是文本继承的强大之处。我们可以在父元素(Section)上设置它们,而不是在每个元素上设置字体颜色或其他排版样式。
当然,所有东西都是边挨着边的。如果我们想要保持整洁?我们可以添加一个容器。(我们在容器中移动的东西都整齐地组织在视口的中心,因为它不仅使东西居中,而且它设置了最大宽度——我们的内容的最大边界。)
如果我们想增加更多的呼吸空间?我们可以选择我们的Section并添加padding -在Section的顶部添加一些空白…和底部。当我们添加背景图片时呢?(如果我们想要一个背景图像?)一般来说,这适用于Section…所以图像是全宽的。
只要记住……后来呢?我们可以在其他地方使用我们创建的样式。我们所做的更改将影响所有应用了这个类的section。现在,让我们移除背景图像,这样我们的section就有了一个干净的起点。
但是很多人会创建一个section的替代版本。例如,如果我们的Section是深色的,也许我们想要一个浅色的变体。让我们在这里复制Section(同样,因为我们将类应用于两个Section,一个Section的更改将影响另一个Section的样式)。
但是,如果我们想在刚刚制作的基础上建立新的样式呢?我们可以添加一个combo类:我们可以点击并输入Light(或者给它起任何我们想要的名字),现在我们可以修改这些值。(也许我们想要更浅的背景,与此同时,我们想要更深的文字-更深的字体颜色。)
组合类是这样工作的。它们基于原始的section类,但我们可以在combo类上添加和重写样式。如果我们返回到原始部分并进行更改—只要没有在combo类上覆盖它,您就会看到更改传递到该部分的所有实例。但如果需要,我们可以重写combo类。
当我们在设计和开发另一个Section时,我们可以随时添加我们最初创建的Section类。最重要的是,当我们想要添加组合时……我们可以添加轻版本。
但这些都是基础。让我们再来谈谈身高。对于普通高度属性,有一个小问题:设置太小?它破坏了我们的内容。(有时我们可以观察到它,但当我们调整视口的大小时,它仍然不能工作。)
这就是最低高度的由来。如果我们设置一个像素值(最小高度),它永远不会小于这个值,但如果section中的内容创造了更多的空间,section会尊重这个值。这就是为什么它是一个伟大的实践(也就是说,如果您想手动定义保存内容的东西的高度)-使用最小值是一个好主意。
但还有一件事需要考虑如果我们把最小高度设得更大,我们的内容就会被分块到上面。我们怎么把它放在中心?这就是flexbox派上用场的地方。有了Section中的容器,我们可以选择Section,并将其设置为flex。当我们这样做时,我们可以垂直居中它的子元素(我们垂直居中我们的容器)。当然,我们可以在这里使用所有的伸缩选项,所以如果我们想让内容粘在底部?还是上面?我们有很多选择。
这种风格的改变将我们引向VH。这里是同样的处理。这是一个非常普遍的模式,特别是在英雄区——我们想要设置它占百分之百的视口高度。我们做什么?100vh(视口高度)。因为它是一个最低高度,如果里面有更多的东西,Section会尊重它创造的空间。
50 VH ?这是视口高度的50%。200 VH ?这是视口高度的200%
这是我们进入3D相机效果之前的最后一部分。这就是格里姆一直在等待的部分
[格里姆]对不起,我需要我的站位球门。我只有12个。
[麦奎尔]现在是下午2点。
[格里穆尔]我起了个大早去看IT乐队的Theragun。
McGuire:如果你有一个Section的子元素(这些是Section中的ANY元素,即使它们在Section中的其他东西中)……有时我们想要在3D空间中添加旋转或移动。但是在本例中(每个元素都应用了相同的类,所以我们一次对它们进行了样式化)。如果我们往下添加一个3D变换,任何类型的3D移动看起来都是平面的。(这是一种等距投影,而我们可能更希望看到的效果是透视投影。)有趣的是——格里姆!
[格里莫]对不起,我的肌肉太紧了!
为了演示透视投影,让我们把我们的旋转像这样一秒钟,并启用3D相机效果。选择区域后,我们需要做的就是进入转换设置…并添加一个Children透视图(之所以这么叫是因为它添加了影响子元素的透视图)。
对儿童来说,更高的视角值是一种更平的效果,就像相机用长焦镜头对准远处的物体一样,而更低的视角值则是用广角镜头更接近物体。
同样,儿童视角将Section这样的元素变成了一种相机……为它的任何子元素启用3D -层次结构中较低的任何子元素。
但这只是我们的概述——section中还有更多与容器、Div块、网格相关的内容,甚至更高级的配置,如基于滚动的交互,你可以应用到你的section中……所以去Webflow University看看吧…如果你还没有。
对于这一课,我们在很短的时间内覆盖了相当多的内容,只有一些轻微的干扰。我们添加了一些部分并设置了样式(根据其中的内容设置大小)。我们介绍了如何使用像素和VH(视口高度)设置最小高度,并展示了如何通过设置儿童视角将一个部分变成3D摄像机……对Section本身的影响
但这是对section的概述…在Webflow设计器中。
section是一个布局元素,宽度为100%,横跨整个浏览器窗口的宽度。章节在页面的结构和布局中扮演着重要的角色。section允许您创建单独的内容块,并将页面划分为有意义的段。
在这节课中:
你可以添加一个部分元素添加到页面元素面板(A).默认情况下,Section将横跨正文的整个宽度。
默认情况下,section内部也没有填充。如果不希望内容跨越正文宽度,请将容器使元素保持页面居中。
专家提示:要有一个良好的、一致的网站结构,在body元素中添加部分,然后在这些部分中的容器中组织你的内容。
Section的高度会根据其内容自动调整—当添加元素时,Section会变高。您还可以在样式面板中设置特定的高度。
Combo类允许您添加组合样式,并且是基于原始节类的-您可以重写样式并在Combo类的顶部添加样式。
如果您对原始部分进行更改—您将看到更改传递到该部分的所有实例(只要它没有在combo类上被重写)。
您还可以重写combo类。在设计和开发另一个Section时,可以添加原始Section类。
当您向Section添加文本和媒体时,高度将更改以定义高度。无论添加了多少内容,Section高度都尊重其中的内容。
Section的填充也会影响它的高度。最好的做法是设置Section的顶部和底部填充,并添加内容让它相应地调整。
要设置Section的特定高度,最好设置一个最小高度(例如500px),这样Section就可以随着它的内容展开。
如果你设置了一个正常的高度,内容最终会溢出或被切断。
将容器放在Section中,选择Section,并将其设置为flex.然后你可以垂直居中它的子元素(垂直居中容器)。
在某些情况下,比如在创建英雄Section时,你可以给Section一个特定的高度。在这种情况下,使用viewport高度(vh)单位来指定Section高度。
例如,100年vh将填充100%的视口高度。设置它50 vh将填充视口高度的50%,以此类推。
专业技巧:设置你的区域的显示设置为flex使容器和它的内容垂直居中。
如果你有一个Section的子元素(Section内的任何元素,即使它们位于Section内的其他元素内),你可能想要在3D空间中添加旋转或移动。如果每个元素都应用了相同的类,您将一次对它们进行样式设置。
你添加一个3D变换,任何类型的3D移动看起来都有点平坦(这是因为它是一个等距投影,我们可能想要的效果是透视投影)。
要演示透视投影,请保持旋转状态,并启用3D相机效果。
选择Section后,单击Transform设置并添加一个Child透视图(影响子元素的透视图)。
对儿童来说,更高的视角值是一种更平的效果,就像相机用长焦镜头对准远处的物体一样,而更低的视角值则像是用广角镜头更接近物体一样。
子视角将Section这样的元素变成类似于摄像机的效果,为它的任何子元素(任何层次结构中较低的子元素)启用3D。
以上就是Webflow设计器中Sections的概述。不错的工作!
提交表单时出错了。请联系support@www.raktarban.com