# 自定义样式

草料二维码新版[活码编辑器](/help/content-display/dynamic-qr-code-editor "活码编辑器")支持「自定义样式」组件。你可以把网页内容、设计稿或 AI 生成的静态 HTML 复制进来，快速制作更有设计感的扫码页面。

自定义样式适合产品介绍、活动宣传、门店信息、设备说明等展示型场景。粘贴后可以先预览实际效果，如样式有偏差，可进入「编码模式」继续调整。

## 可以复制哪些内容进来

自定义样式主要支持复制静态 HTML 内容，适合用来展示文字、图片、表格、卡片、按钮等页面元素。

- 网页内容：图文介绍、参数表格、说明区块、活动信息
- 设计稿转出的 HTML：标题区、图文卡片、信息模块、流程步骤
- AI 生成结果：移动端静态 HTML 页面、卡片式排版、按钮样式
- 自己写的代码：`div`、`p`、`span`、`img`、`a`、`table` 等 HTML 标签
- 其他编辑器内容：图文混排、表格、简单按钮、分割线等内容

比较适合粘贴的内容包括：

- 标题、正文、列表、分割线
- 图片、图文卡片、信息卡片
- 表格、参数说明、流程步骤
- 按钮样式、链接入口
- 背景色、圆角、边框、阴影、字号、间距等基础样式

提示：建议复制以展示为主的内容。完整网页源码通常包含脚本、外部样式和复杂交互，粘贴后不一定能完整保留。

## 推荐使用流程

如果你只是想快速做出一个更好看的扫码页面，可以先参考[内容展示活码制作教程](/help/operation-tutorials/content-display-qr-code-tutorial "内容展示活码制作教程")完成基础内容，再按下面的步骤添加自定义样式。

### 1. 准备展示内容

先准备要展示的内容，如产品介绍、活动说明、门店信息等。如果内容已经在网页、设计稿或 AI 生成结果中，可以直接复制对应的静态 HTML。

### 2. 添加自定义样式组件

在活码编辑器中添加「自定义样式」组件，将准备好的 HTML 粘贴到组件中。

### 3. 预览手机端展示效果

粘贴后切换到预览，检查手机端展示效果。如果有样式偏差，进入「编码模式」调整。

### 4. 保存二维码内容

确认文字、图片、按钮和链接都能正常展示后，保存二维码内容。

这个流程不需要你从头写网页。大多数情况下，只要内容是静态展示型 HTML，就可以先复制进来，再根据预览效果微调。

## 粘贴后先预览效果

添加自定义样式后，建议先预览扫码页面。电脑端编辑区和手机端扫码页面的显示环境不同，预览能帮助你提前发现样式问题。

可以重点检查：

1. 文字是否完整显示
2. 图片是否能正常加载
3. 页面宽度是否适合手机屏幕
4. 表格是否过宽
5. 按钮和链接是否容易点击
6. 背景色和文字颜色是否清晰
7. 页面是否出现明显错位或空白

如果预览效果符合预期，就可以继续编辑其他内容。如果样式有偏差，可以进入「编码模式」调整。

## 在编码模式中调整样式

粘贴自定义 HTML 后，组件操作条中会提供「编码模式」。进入后，可以直接修改 HTML 和样式代码。

适合在编码模式中调整的内容包括：

- 修改文字大小、颜色、粗细
- 调整模块间距和内边距
- 修改背景色、边框、圆角
- 删除不兼容或多余的样式
- 将复杂布局改成手机端更稳定的单列布局
- 替换图片地址
- 调整按钮链接

例如，可以把内容区域改成适配手机屏幕的宽度：

```html

  内容区域

```

图片建议设置最大宽度，避免超出屏幕：

```html

```

如果不想继续保留 HTML 样式，也可以使用「转为文本」，将内容转换成普通文本后再编辑。

## 可以让 AI 根据截图生成样式

如果你不熟悉 HTML，可以把参考截图发给 AI，让 AI 按截图生成一段可直接粘贴到「自定义样式」里的 HTML。适合用来还原产品介绍卡片、活动海报、门店信息块、价格卡片、按钮组等视觉样式。

为了让生成结果更适合在微信小程序和扫码页面中展示，建议在提示词里说明这些要求：

```text
请根据我提供的截图，生成可直接渲染的 HTML 片段，用于微信小程序 webview、Skyline 和 rich-text 场景。

要求：
1. 只还原截图中的核心组件，不要生成页面背景、导航栏、底部栏等环境内容。
2. 最外层组件 width:100%，直接撑满父容器，不设置 max-width 和左右 margin。
3. 样式全部使用 inline-style，不使用 style 标签、class、id、外部 CSS 和 JS。
4. 只使用 div、span、img 等基础标签，不使用 svg、emoji、伪元素。
5. 布局优先使用 flex，不使用 grid，尽量避免 position:absolute。
6. 所有容器设置 box-sizing:border-box，避免宽度溢出。
7. 适配 PC 和手机宽度，手机端保持紧凑，不要使用过大的字号、间距和 padding。
8. 横向 flex 容器中的文字区域设置 min-width:0，避免撑破布局。
9. 图片使用 img 标签，并设置 display:block;width:100%;。
10. 不使用 calc、vw、vh、clamp、媒体查询、动画、滤镜等兼容性不稳定的写法。
11. 只输出最终 HTML 代码，不要解释，不要用 Markdown 代码块包裹。
12. HTML 压缩为一整行，方便我一次性复制。
```

AI 生成后，可以先复制到自定义样式组件中预览。如果效果不理想，可以继续让 AI 调整，例如：

- 把整体字号调小一点，适配手机屏幕
- 减少左右 padding，避免内容换行
- 把表格改成卡片式展示
- 去掉复杂动画和交互，只保留静态样式
- 将多列布局改成手机端更稳定的单列布局

提示：AI 生成的 HTML 建议先预览，再进入「编码模式」微调。这样既能快速得到接近截图的样式，也能保证扫码页面在小程序端稳定展示。

## 使用建议

为了让自定义样式更稳定，建议遵循以下原则：

- 优先使用简单 HTML 标签，如 `div`、`p`、`span`、`img`、`a`、`table`
- 样式尽量写在当前元素上，不依赖外部 CSS
- 页面按手机端单列排版，不使用过宽布局
- 图片使用可公开访问的链接
- 表格内容较多时，可以改成分组卡片
- 不放复杂脚本、动画和网页交互
- 粘贴后先预览，再根据效果进入编码模式微调

如果只是展示一段产品说明、活动介绍或门店信息，用简单 HTML 加内联样式通常就够了。不要为了追求网页效果，把复杂动效、弹窗、轮播等能力都放进扫码页面里。

## 常见问题

### 1. 哪些内容可能不支持或效果不完整？

以下内容可能无法完整保留：

- JavaScript 脚本：不会执行，交互效果无法生效
- 外部 CSS 文件：可能无法加载，建议改成内联样式
- 复杂动画：可能不展示，或与网页效果不同
- 悬浮、吸顶、弹窗等交互：小程序端可能无法按网页方式运行
- 伪类样式：如 hover、active 等效果可能不明显
- 复杂布局：多层嵌套、绝对定位、超宽元素可能导致错位
- 第三方组件：依赖 JS 的轮播、地图、表单控件等通常不适合直接粘贴

如果内容只是展示文字、图片、表格和按钮，一般更容易得到稳定效果。如果内容依赖脚本或复杂交互，建议改成静态展示形式。

### 2. 为什么样式可能会有损耗？

同一段 HTML，在电脑浏览器和微信小程序里看到的效果可能不完全一样。

扫码页面需要适配不同手机、系统和小程序渲染环境。为了保证页面能正常打开、内容不出错，编辑器会对部分 HTML 和样式做兼容处理。这个过程可能会让复杂样式被简化。

常见表现包括：

- 字体、间距和原网页略有差异
- 阴影、渐变、圆角效果变弱
- 复杂布局变成更适合手机阅读的单列排版
- 部分不兼容标签或属性被忽略
- 外部样式没有完整带入

这类损耗通常不是内容丢失，而是为了让页面在小程序端更稳定地展示。二维码页面的首要目标是让扫码者顺利查看内容。

### 3. 样式不符合预期怎么办？

可以先进入「编码模式」调整 HTML 和内联样式。常见处理方式包括：

- 删除复杂样式
- 把多列布局改成单列布局
- 给图片增加 `max-width:100%;height:auto;`
- 把过宽表格改成卡片
- 调整字号、颜色和间距

如果仍然不好调整，也可以把当前代码复制给 AI，让 AI 帮你改成更适合手机端展示的静态 HTML。

### 4. 可以直接复制完整网页源码吗？

不建议直接复制完整网页源码。

完整网页通常包含页面框架、导航栏、底部栏、脚本、外部 CSS、统计代码等内容。这些内容放进二维码页面后，可能会造成样式错乱或显示异常。

更推荐复制网页中的某个内容模块，比如产品介绍区、活动说明区、价格卡片、图文说明卡片等。这样更容易在扫码页面中稳定展示。

### 5. 自定义样式适合替代所有组件吗？

不适合。

自定义样式更适合做展示型内容排版。如果你需要上传图片、视频、文件，或添加[表单](/help/forms/form-feature "表单功能")、[联系方式](/help/content-display/contact-info "联系方式")、跳转链接等功能，建议优先使用活码编辑器里的标准组件。标准组件的兼容性和后续维护会更稳定。

自定义样式可以作为补充，用来做更个性化的图文展示。

## 小结

自定义样式适合把网页内容、设计稿排版或 AI 生成的 HTML 快速放进二维码页面，让扫码展示更有层次。

使用时可以先复制静态 HTML，再预览手机端效果。如样式有偏差，可以进入「编码模式」继续调整。为了保证小程序端稳定渲染，复杂网页效果可能会有损耗，建议优先使用静态 HTML 和内联样式。