布局基础

slidde 网页的结构

Slidde.co 使用一个简单的四层结构：

• userCompName.Page（全局样式）
• userCompName.Slide（内容分段）
• userCompName.Container（响应式宽度，多列）
• 内联元素（具体内容）

userCompName.Page

userCompName.Page 层位于顶部，用于设置全局样式，如字体、颜色和链接样式，因为 CSS 属性是可继承的。

您可以选择使用 CSS 变量 来使您的模板更易于使用。

如果您无法直接选择 userCompName.Page 元素，请使用工具栏中的 userCompOption.Select page 选项。

userCompOption.hashSection 功能可以模拟一个多页面网站。查看这个演示：[演示链接](https://demo-76e69f00.slidde.co/)

userCompName.Slide

userCompName.Slide 是 userCompName.Page 下的一级元素，用于分段内容。

• 简单的页面，如“链接在简介”页面，可能只有一个 Slide。
• 复杂的着陆页可能包括多个部分，如 #header、#hero、#works、#contact、#footer。

userCompOption.htmlId 本质上是一个 HTML ID。根据 userCompName.Slide 中的内容命名它们，以便使用类似“#ID”的链接轻松导航。[了解更多关于跳过链接的信息](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links)。

要在最终网站中隐藏 userCompName.Slide 但保留它们，请勾选 userCompOption.hidden 属性。这类似于 PowerPoint 的隐藏幻灯片，也可用于教程。

userCompOption.sticky 功能用于浮动导航栏或其他任何元素。请参见此处的示例：[Sticky Demo](https://demo-09963200.slidde.co/)

userCompName.Container

userCompName.Container 管理响应式宽度和多列显示。

• 移动设备和桌面设备的宽度通常不同。在 userCompName.Container 中使用 userCompOption.width 属性，以实现跨设备的自适应宽度。
• 列定义了容器中的列数。您可以设置像 x/12 这样的宽度（例如，两个 6/12 列，每个占 50% 的宽度）。

每个列还可以设置水平和垂直对齐。

其他

其他元素是内联元素，可以放置在容器内。

通过遵循这种结构化的方法，您可以轻松使用 Slidde.co 创建视觉上吸引人的响应式网页。