登录
首页
定价
文档
反馈
简体中文

布局基础

Last updated on 12/2/2024@mrbirddev

slidde 网页的结构

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

页面
(全局样式)
幻灯片
(内容分割)
容器
(响应式宽度,多列布局)
内联元素
(具体内容)
...
内联元素
(具体内容)
...
...
...

页面

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

您可以选择使用 CSS 变量 来使您的模板更加用户友好。

如果您无法直接选择页面元素,请使用工具栏中的选择页面选项。

哈希部分功能可以模拟一个多页面网站。查看此演示:演示链接

幻灯片

幻灯片是页面下的一级元素,用于分割内容。

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

锚点 ID (HTML ID)本质上是一个HTML ID。根据幻灯片中的内容命名它们,以便使用类似“#ID”的链接轻松导航。了解更多关于跳过链接的信息

要从最终网站中隐藏幻灯片但保留它们,请勾选隐藏属性。这类似于PowerPoint的隐藏幻灯片,也可用于教程。

粘性功能用于浮动导航栏或其他元素。查看示例:Sticky Demo

容器

容器管理响应式宽度和多列显示。

  • 移动设备和桌面设备的宽度通常不同。在容器中使用宽度属性,以适应不同设备的宽度。
  • 列定义了容器中的列数。您可以设置像x/12这样的宽度(例如,两个6/12的列各占50%宽度)。

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

其他

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

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

Loading...