自定义样式

介绍

Slidde.co 提供了一种独特的网页设计方法，允许您在每个组件中直接使用 CSS 自定义样式。与 Webflow 等传统网站构建器不同，Slidde.co 的特点是：

• 标准 CSS 使用：
  • 实现任何网站样式。
  • 将样式导出到任何网站构建器中，使其在切换到基于代码的开发时可重用。
• 预设值：
  • 受 Tailwind 等库的启发，Slidde.co 提供样式的预设值，允许您通过鼠标点击选择选项，而不是输入。
• 清晰的结构：
  • 即使是复杂的样式，设置也保持清晰，不会破坏 DOM 结构。

示例组件：水平导航栏

让我们以一个复杂的组件——水平导航栏为例，探索五个自定义区域：

1. 自定义样式：整个导航栏的 CSS。
2. 容器自定义样式：左侧容器的样式，通常容纳标志或标题。
3. 按钮自定义样式：桌面按钮的样式。
4. 按钮激活样式：激活的桌面按钮的样式。
5. 切换按钮自定义样式：移动端汉堡菜单按钮的样式。

您可以在这里查看完整的导航栏示例 模板。

高级 CSS 语法

Slidde.co 支持高级 CSS 语法，以实现更精确的样式：

• 点分隔符：使用 . 将属性与修饰符分开。
• 驼峰命名法：CSS 属性名称使用驼峰命名法。

示例：

• &:hover.color：悬停时的字体颜色。
• &:hover.borderColor：悬停时的边框颜色。
• padding：所有屏幕尺寸的内边距。
• md.padding：大于中等（桌面）屏幕的内边距。

要为移动端和桌面设置不同的内边距：padding: .5rem 和 md.padding:2rem。

标准 CSS 选择器：

• & > img.height：当前元素内一级 img 元素的高度。
• &:first-child.color：第一个子元素的 ::first-child 伪类。
• &::after.content：使用 ::after 伪类添加额外元素。

通过遵循这些指南，您可以有效地使用 Slidde.co 精确且轻松地设计和定制您的网页组件。