想要使用水平线将标题与正文分开?这只是线素的一种用法。在本文中,我们将深入研究如何根据您的喜好添加和配置这个Element。

  1. 线设置
  2. 设计
  3. 定制
  4. 演示
  5. 总结

你可以想出很多方法在你的网站中使用线条。然而,它最常见的用途之一是将文本彼此分开。这种用法的一个例子是将标题与正文分开,如下所示。

线的例子

要添加元素,只需搜索“line”并选择

线元素内容生成器

线设置

当你检查元素,你会看到以下设置:方向,基本字体,宽度最大宽度,大小和颜色风格。

线设置

方向

水平为默认值。如果这是选中的选项,线元素将被水平定位。

线路方向示例

如果您选择垂直,那么这条线就会立起来。你很少会用到它垂直在基石/内容构建器中,尽管很好地指出这个选项是可用的。垂直选项的通常和实际用法是在专业版的页眉和页脚构建器中。

线方向头示例

基本字体大小

如果你将使用新兴市场单位大小字段,则您将为基本字体大小场将如何影响大小字段将计算该值。让我用一个例子来解释:

的值2他们基本字体大小并设置大小2他们的值时,该线元素将比基本字体大小只是1 EM.如果基本字体大小为20 PX尺寸为1 EM,这将比基本字体大小的值为10 PX。

如果你用任何一种PX快速眼动,则您为基本字体大小设置的值将被忽略。

宽度最大宽度

宽度为线素的实际宽度。宽度不能超过最大宽度.最大宽度用于处理元素的响应性。

大小

这设置了线元素的粗细。

颜色风格

您可以设置颜色线条和它的风格。样式可以是:

线条颜色及款式

设计

您可以设置线元素的边缘,边界半径和框阴影。让我们看看每个设置如何与线元素相关。

保证金

使用此选项可设置行边距。您可以更改线的所有边的设置或单独修改它们。

行距示例

边界半径

使用此选项可设置线条的边界半径。你可以在所有边都设置曲线,也可以单独设置。

线边界半径示例

盒阴影

您可以使用盒影控制组在亚麻上设置阴影。

线框阴影示例
  • x-使用此选项设置线条中阴影的X偏移量。
  • y-使用此选项设置线条中阴影的Y偏移量。
  • 模糊-使用此选项设置线条模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定是否希望阴影位于线内或线外。
  • 颜色-使用此选项设置线条阴影的颜色。

定制

自定义窗格由各种功能组成,允许您进一步控制元素的样式和功能:

  • ID - - - - - -在元素上设置HTML ID。
  • - - - - - -在元素上设置HTML类。
  • 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制,特别是对嵌套标记的控制。点击在这里有关此特性的详细信息,如使用el美元来动态地定位基本标签,等等。
  • 在断点期间隐藏 - - - - - -当需要改变设计时,以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
  • 条件 - - - - - -当满足某些条件时,从页面中添加/删除元素。如果设置了特色图像…).点击在这里获取更多信息。
  • 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ").这在与各种脚本和库集成时尤其有用。

演示

要查看现场演示的线元素单击在这里

总结

你知道了!现在你知道了如何在基石中添加和设计垂直和水平的线条。

看到不准确的东西了吗?让我们知道

Baidu
map