🔥 会员专享文生文其它

网页列表生成器

👁️ 77 次查看

📅 Dec 4, 2025

💡 核心价值： 本提示词专为网页开发场景设计，能够根据用户需求快速生成标准化的HTML列表代码。支持有序列表和无序列表两种类型，可自定义列表项内容和列表样式，确保生成的代码符合W3C标准且具备良好的浏览器兼容性。适用于产品展示、导航菜单、功能列表等多种网页开发场景，帮助开发者提高工作效率，减少编码错误。

终身会员免费复制

🎯 可自定义参数（3个）

列表项内容

列表项内容，多个项目使用逗号分隔

列表类型

列表类型选择

样式需求

列表样式风格需求

🎨 效果示例

HTML代码

<!-- 产品卖点列表（商务风） -->
<section class="product-features" aria-labelledby="features-title">
  <!-- 仅供无障碍使用的标题，视觉上隐藏 -->
  <h2 id="features-title" class="sr-only">产品核心卖点</h2>

  <!-- 卡片式容器，便于在不同版块复用 -->
  <div class="features-card" role="group" aria-label="产品核心卖点列表">
    <ul class="feature-list">
      <!-- 列表项：请根据需要增删 -->
      <li>轻盈机身仅1.2kg，适合移动办公</li>
      <li>续航12小时，支持65W快充</li>
      <li>2.8K护眼高刷屏，低蓝光不闪</li>
      <li>金属一体化机身，耐用防指纹</li>
      <li>Wi‑Fi 6E高速传输，稳定低时延</li>
    </ul>
  </div>
</section>

CSS样式

/* ===============================
   商务风产品卖点列表样式（可复用）
   说明：
   - 采用语义化 ul/li 结构
   - 支持响应式布局与深色模式
   - 提供老旧浏览器的降级方案
   =============================== */

/* 设计令牌（可按品牌统一定制） */
:root {
  --pf-accent: #2563eb;        /* 强调色：商务蓝 */
  --pf-fg: #0f172a;            /* 文字色：深灰蓝 */
  --pf-muted: #475569;         /* 次要文字色 */
  --pf-bg: #ffffff;            /* 背景色 */
  --pf-card: #ffffff;          /* 卡片背景色 */
  --pf-border: #e2e8f0;        /* 边框色 */
  --pf-radius: 12px;           /* 统一圆角 */
  --pf-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --pf-fg: #e2e8f0;
    --pf-muted: #94a3b8;
    --pf-bg: #0b1220;
    --pf-card: #0f172a;
    --pf-border: #1f2937;
    --pf-shadow: none; /* 深色模式弱化阴影 */
  }
}

/* 无障碍：仅屏幕阅读器可见的文本 */
.sr-only {
  /* 隐藏视觉但保留可访问性 */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* 模块容器 */
.product-features {
  /* 使用系统字体栈，提升跨平台显示一致性 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "WenQuanYi Micro Hei", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--pf-fg);
  background: transparent;
}

/* 卡片式包裹，便于在版心中使用 */
.features-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
  padding: clamp(16px, 2.8vw, 28px); /* 响应式内边距 */
}

/* 列表布局：自适应列数（宽屏最多多列）、移动端单列 */
.feature-list {
  /* 语义列表，隐藏默认圆点，改用图标标识 */
  list-style: none;
  margin: 0;
  padding: 0;

  /* 优先使用 Grid 布局以获得更好的对齐与换行表现 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 18px;
}

/* 不支持 Grid 的降级处理（如老旧浏览器） */
@supports not (display: grid) {
  .feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .feature-list > li {
    flex: 1 1 260px; /* 与 Grid 的 minmax 保持接近 */
  }
}

/* 列表项样式 */
.feature-list > li {
  position: relative;
  line-height: 1.65;
  color: var(--pf-fg);
  font-size: clamp(14px, 1.6vw, 16px); /* 响应式字号 */
  padding-left: 32px; /* 为图标留出空间 */
  word-break: break-word; /* 处理中英文混排 */
}

/* 自定义圆形对勾图标（商务蓝） */
.feature-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;                 /* 与文本基线微调对齐 */
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l2.5 2.5L16 9'/%3E%3C/svg%3E");
}

/* 细微的行间分隔，增强可读性（可选） */
.feature-list > li:not(:last-child) {
  /* 仅在单列时展示底部分隔，避免多列视觉杂乱 */
  border-bottom: 1px dashed transparent;
}
@media (max-width: 640px) {
  .feature-list > li:not(:last-child) {
    border-bottom-color: var(--pf-border);
    padding-bottom: 10px;
  }
}

使用说明

复制HTML代码至需要展示卖点的区域；将CSS样式引入到您的项目样式文件或在页面的样式块中引用。
可在:root中调整品牌色、圆角、阴影以适配整体设计风格。
列表为语义化ul/li结构，默认采用网格布局，在宽屏下自动排成多列，小屏下单列展示；无需改动HTML即可响应式适配。
若需要标题可见，可去掉h2的sr-only类名或在features-card前添加可见标题。
列表项内容可直接增删li；每个li不建议包含交互元素，若需点击跳转，请将li内部包裹a标签并增加可访问的可聚焦样式。

兼容性说明

现代浏览器：Chrome 61+、Firefox 60+、Safari 12+、Edge 79+完全支持当前写法；深色模式根据用户系统偏好自动适配。
移动端：iOS 12+、Android 8+表现良好；字体与间距已针对小屏优化。
降级处理：老旧浏览器不支持CSS Grid时，样式会自动回退为Flex多行布局，仍保持良好排列；更古老环境（如 IE 11）将显示为块级换行但不影响可读性。
无障碍：提供屏幕阅读器可识别的标题与语义化列表结构；如自定义交互，请保持足够的颜色对比度（建议对比度≥4.5:1）。

HTML代码

<!-- 语义化导航，使用无序列表承载导航项 -->
<nav class="site-nav" aria-label="主导航">
  <!-- 列表采用 <ul><li> 结构，符合“unordered”类型需求 -->
  <ul class="site-nav__list">
    <!-- 提示：将当前页面的链接加上 aria-current="page" 以提升可访问性 -->
    <li class="site-nav__item">
      <a class="site-nav__link" href="/" aria-current="page">首页</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/products">产品中心</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/solutions">解决方案</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/pricing">价格与套餐</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/cases">成功案例</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/docs">开发文档</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/blog">博客</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/about">关于我们</a>
    </li>
    <li class="site-nav__item">
      <a class="site-nav__link" href="/contact">联系方式</a>
    </li>
  </ul>
</nav>

CSS样式

/* ========== 设计变量（可按需覆盖） ========== */
:root {
  /* 文字与基础色 */
  --nav-fg: #0f172a;             /* 深色文字（slate-900） */
  --item-fg: #0f172a;
  --item-bg: #ffffff;
  --item-border: #e2e8f0;        /* 边框（slate-200） */

  /* 交互态 */
  --item-hover-bg: #f1f5f9;      /* 悬停背景（slate-100） */
  --item-hover-border: #cbd5e1;  /* 悬停边框（slate-300） */
  --focus-color: #2563eb;        /* 焦点可视化（blue-600） */

  /* 当前页（高亮） */
  --accent-bg: #2563eb;          /* 当前项背景 */
  --accent-fg: #ffffff;          /* 当前项文字 */
  --accent-border: #1d4ed8;      /* 当前项边框（blue-700） */

  /* 阴影与圆角 */
  --item-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --radius-pill: 9999px;

  /* 间距与尺寸 */
  --gap: 0.5rem;                 /* 列表项间距 8px */
  --px: 0.875rem;                /* 水平内边距 14px */
  --py: 0.5rem;                  /* 垂直内边距 8px（配合 min-height 满足触控尺寸） */

  /* 字体 */
  --font-size: 0.95rem;          /* 略小于 16px，更现代的紧凑感 */
  --font-weight: 500;            /* 中等字重，提升可读性 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --nav-fg: #e5e7eb;           /* text-gray-200 */
    --item-fg: #e5e7eb;
    --item-bg: #0b1220;          /* 深色底（接近 slate-950） */
    --item-border: #1f2937;      /* slate-800 */

    --item-hover-bg: #111827;    /* slate-900 */
    --item-hover-border: #334155;/* slate-700 */

    --item-shadow: none;         /* 深色模式减少阴影 */
    --accent-bg: #3b82f6;        /* blue-500 */
    --accent-fg: #ffffff;
    --accent-border: #2563eb;    /* blue-600 */
  }
}

/* ========== 结构与布局 ========== */
.site-nav {
  /* 外层容器不强加布局，便于复用嵌入任意区域 */
  color: var(--nav-fg);
}

.site-nav__list {
  /* 去除默认列表样式 */
  list-style: none;
  margin: 0;
  padding: 0;

  /* 现代导航常用的横向分布，自动换行适应小屏 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
}

.site-nav__item {
  /* 保留钩子，便于按需定制单项 */
}

/* ========== 链接视觉与交互 ========== */
.site-nav__link {
  /* 内联弹性盒，保证触控命中区域与文字垂直居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 尺寸与间距：最小高度满足 44px 的无障碍触控规范 */
  padding: var(--py) var(--px);
  min-height: 44px;
  min-width: 44px; /* 确保小图标或短文案时也有可点区域 */

  /* 外观 */
  color: var(--item-fg);
  background-color: var(--item-bg);
  border: 1px solid var(--item-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--item-shadow);
  text-decoration: none;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;

  /* 细腻过渡，提升现代感 */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .08s ease;
}

.site-nav__link:hover {
  background-color: var(--item-hover-bg);
  border-color: var(--item-hover-border);
}

.site-nav__link:active {
  /* 轻微按压反馈 */
  transform: translateY(1px);
}

/* 焦点可视化：键盘导航可见，鼠标点击尽量不打扰 */
.site-nav__link:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* 兼容不支持 :focus-visible 的浏览器 */
.site-nav__link:focus {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.site-nav__link:focus:not(:focus-visible) {
  outline: none;
}

/* 当前页面高亮（通过 aria-current="page" 或给父元素添加 .is-active 类） */
.site-nav__link[aria-current="page"],
.site-nav__item.is-active > .site-nav__link {
  background-color: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent-border);
}

/* 降低动态效果，照顾“减少动画”偏好用户 */
@media (prefers-reduced-motion: reduce) {
  .site-nav__link {
    transition: none;
  }
}

/* 强制高对比（Windows 高对比模式）优化 */
@media (forced-colors: active) {
  .site-nav__link {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
  .site-nav__link:focus,
  .site-nav__link:focus-visible {
    outline: 2px solid Highlight;
  }
  .site-nav__link[aria-current="page"],
  .site-nav__item.is-active > .site-nav__link {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}

/* 可选：容器级控制对齐方式（默认左对齐）
   若需要居中或右对齐，可在父级添加以下任意一条：
   .site-nav__list { justify-content: center; } 或 { justify-content: flex-end; } */

使用说明

基本用法
- 将“HTML代码”片段放入页面头部或需要展示主导航的区域。
- 将“CSS样式”片段引入到全局样式文件或该页面的样式块中。
当前页面高亮
- 为当前页面对应的 a 元素添加 aria-current="page"（推荐做法，利于无障碍）。
- 或者为对应的 li 添加类名 is-active（已在样式中兼容）。
链接地址
- 将 href 替换为站点真实路径，例如 /products、/pricing 等。
对齐方式
- 默认左对齐。需要居中或右对齐时，给 .site-nav__list 设置 justify-content: center 或 flex-end。
紧凑/宽松样式
- 调整变量 --px 与 --py 改变内边距；或修改 --gap 控制导航项间距。
深色模式与系统偏好
- 已适配 prefers-color-scheme: dark，会随系统深浅色自动切换。可覆盖变量自定义品牌色。
移动端展示
- 列表会自动换行，保证在小屏仍然可点击。如果希望改为横向滚动，可将 .site-nav__list 改为：
  - white-space: nowrap; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;

兼容性说明

浏览器支持
- 现代浏览器（Chrome 80+、Edge 79+、Firefox 78+、Safari 13+）均可正常显示与交互。
- CSS变量、flex、:focus-visible 在上述版本有良好支持；已提供 :focus 回退与 forced-colors 适配。
无障碍与可用性
- 触控命中区至少 44px 高，符合移动端可点击区域规范。
- 使用 nav + ul 的语义结构，并通过 aria-current 显示当前页状态，利于屏幕阅读器。
性能与降级
- 不依赖 JavaScript；在更老旧浏览器上即使忽略部分视觉增强（如焦点环样式），功能仍可用。
建议
- 若需支持极老旧浏览器（如 IE），请增加相应的 polyfill 或移除变量并使用静态颜色值。

HTML代码

<!-- 语义化导航容器，作为文章目录或章节索引使用 -->
<nav class="toc" aria-labelledby="toc-title">
  <!-- 目录标题，供辅助技术读取 -->
  <h2 id="toc-title" class="toc__title">文章目录</h2>

  <!-- 有序列表：保持数字顺序，语义清晰 -->
  <ol class="toc__list">
    <!-- 列表项内容保持与用户输入一致 -->
    <li class="toc__item">引言为何性能优化重要</li>
    <li class="toc__item">第一章指标与监测方法</li>
    <li class="toc__item">第二章前端渲染与资源优化</li>
    <li class="toc__item">第三章缓存与CDN策略</li>
    <li class="toc__item">第四章服务端性能与扩展</li>
    <li class="toc__item">结语上线前检查清单</li>
  </ol>
</nav>

CSS样式

/* ========== 基础样式（简洁风格） ========== */
/* 容器：控制宽度与基础排版 */
.toc {
  max-width: 48rem;              /* 限制行长，提升可读性 */
  margin: 1rem auto;             /* 居中并留出与周围内容的间距 */
  color: #222;                   /* 深色文本，保证对比度 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "WenQuanYi Micro Hei", sans-serif; /* 跨平台无衬线字体栈 */
}

/* 标题：轻量突出 */
.toc__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;           /* 略大于正文的字号 */
  font-weight: 600;
  line-height: 1.4;
}

/* 有序列表：使用默认十进制序号，控制缩进与间距 */
.toc__list {
  list-style: decimal;
  margin: 0;                     /* 清除默认外边距，便于统一控制 */
  padding-left: 1.25rem;         /* 为序号留出空间 */
}

/* 列表项：适度行高与垂直间距，提升可读性 */
.toc__item {
  margin: 0.25rem 0;
  line-height: 1.6;
}

/* 可访问性：若将来将列表项替换为链接，确保键盘焦点清晰可见 */
.toc__item a:focus-visible {
  outline: 2px solid #0a66ff;
  outline-offset: 2px;
  border-radius: 3px;
}

/* 深色模式适配（可选）：在暗色主题下提高文本可读性 */
@media (prefers-color-scheme: dark) {
  .toc {
    color: #eaeaea;
  }
}

使用说明

将“HTML代码”片段直接插入页面正文适合的位置（例如文章开头），并在站点的全局或页面级样式中添加“CSS样式”片段即可生效。
如果需要让目录项跳转到页面锚点：
1. 为正文对应的标题添加 id（例如
  ）。
2. 将每个列表项内容用链接包裹（例如第一章指标与监测方法）。
3. 保持 li 结构不变，仅替换文本为链接即可，CSS 已包含键盘焦点高亮。
可根据页面整体设计微调字体大小、间距或颜色，建议在不破坏列表语义（ol/li）的前提下进行。
若页面整体语言为中文，请确保在顶层 html 标签设置 lang="zh-CN"，有助于屏幕阅读器正确朗读。

兼容性说明

HTML 与核心 CSS 使用了广泛支持的特性，可在现代浏览器（Chrome、Edge、Firefox、Safari）稳定渲染。
prefers-color-scheme 与 :focus-visible 在较新版本浏览器中受支持；旧版浏览器会忽略相关增强，不影响基本显示与功能。
无依赖脚本与高级布局特性（如 Grid/复杂 Flex），在移动端与桌面端均具备良好的默认响应性与可读性。若需支持极老旧浏览器（如 IE 11），当前代码也可正常展示，深色模式与焦点可见增强将被忽略但不影响使用。

📖 如何使用

⚡ 30秒出活：复制 → 粘贴 → 搞定

与其花几十分钟和AI聊天、试错，不如直接复制这些经过千人验证的模板，修改几个 {{变量}} 就能立刻获得专业级输出。省下来的时间，足够你轻松享受两杯咖啡！

加载中...

💬 不会填参数？让 AI 反过来问你

不确定变量该填什么？一键转为对话模式，AI 会像资深顾问一样逐步引导你，问几个问题就能自动生成完美匹配你需求的定制结果。零门槛，开口就行。

转为对话模式 →

🚀 告别复制粘贴，Chat 里直接调用

无需切换，输入 / 唤醒 8000+ 专家级提示词。插件将全站提示词库深度集成于 Chat 输入框。基于当前对话语境，系统智能推荐最契合的 Prompt 并自动完成参数化，让海量资源触手可及，从此彻底告别"手动搬运"。

即将推出

🔌 接口一调，提示词自己会进化

手动跑一次还行，跑一百次呢？通过 API 接口动态注入变量，接入批量评价引擎，让程序自动迭代出更高质量的提示词方案。Prompt 会自己进化，你只管收结果。

发布 API →

🤖 一键变成你的专属 Agent 应用

不想每次都配参数？把这条提示词直接发布成独立 Agent，内嵌图片生成、参数优化等工具，分享链接就能用。给团队或客户一个"开箱即用"的完整方案。

创建 Agent →

✅ 特性总结

一键生成标准化HTML列表，减少手写与改错时间，快速上线页面模块。

支持有序与无序列表，按需切换展示逻辑，适配产品清单、导航与功能说明。

可自定义列表项与样式，一次设置品牌风格，多页面复用保持一致性。

自动输出配套CSS与使用说明，复制即用，轻松获得美观且易维护的呈现。

内置语义化与可访问性考量，提升SEO友好度与不同人群的阅读体验。

自适应多设备屏幕，自动优化间距与字号，移动端与桌面端一致好看。

内建兼容性校验思路，避免浏览器差异坑，一次生成，减少后期返工。

支持参数化调用与多套模板，批量生成列表组件，加速页面搭建进。

中文注释清晰标注结构与用途，新成员也能快速接手与二次改造与维护。

从产品展示到博客目录，多场景即插即用，显著缩短开发到上线周期。

🎯 解决的问题

让任何人都能在几分钟内，从“列表需求”直达“可直接复用的网页代码”，高质高效完成商品卖点、导航菜单、功能清单、文章目录等常见模块。
用标准化的HTML与样式输出，统一团队规范，减少返工与低级错误，并保持在主流浏览器与多终端下的稳定显示。
一键生成有序/无序列表与个性化样式，附带中文注释、使用说明与兼容性建议，降低沟通成本，提升上线速度。
以“前端专家”的质量为准绳，既满足快速交付，又保证语义化、可访问性与可维护性。
激发试用：首次使用即可完成一个可上线的列表模块；促进转化：持续沉淀为团队的复用模板，显著缩短开发周期与人力投入。

🕒 版本历史

当前版本

v2.1 2024-01-15

优化输出结构，增强情节连贯性

✨ 新增章节节奏控制参数
🔧 优化人物关系描述逻辑
📝 改进主题深化引导语
🎯 增强情节转折点设计

v2.0 2023-12-20

重构提示词架构，提升生成质量

🚀 全新的提示词结构设计
📊 增加输出格式化选项
💡 优化角色塑造引导

v1.5 2023-11-10

修复已知问题，提升稳定性

🐛 修复长文本处理bug
⚡ 提升响应速度

v1.0 2023-10-01

首次发布

🎉 初始版本上线

COMING SOON

版本历史追踪，即将启航

记录每一次提示词的进化与升级，敬请期待。

💬 用户评价

4.8

⭐⭐⭐⭐⭐

基于 28 条评价

5星

85%

4星

12%

3星

👤

电商运营 - 张先生

⭐⭐⭐⭐⭐ 2025-01-15

双十一用这个提示词生成了20多张海报，效果非常好！点击率提升了35%，节省了大量设计时间。参数调整很灵活，能快速适配不同节日。

效果好节省时间

👤

品牌设计师 - 李女士

⭐⭐⭐⭐⭐ 2025-01-10

作为设计师，这个提示词帮我快速生成创意方向，大大提升了工作效率。生成的海报氛围感很强，稍作调整就能直接使用。

创意好专业

COMING SOON

用户评价与反馈系统，即将上线

倾听真实反馈，在这里留下您的使用心得，敬请期待。

加载中...

网页列表生成器

🎯 可自定义参数（3个）

🎨 效果示例

HTML代码

CSS样式

使用说明

兼容性说明

HTML代码

CSS样式

使用说明

兼容性说明

HTML代码

CSS样式

使用说明

）。

兼容性说明

📖 如何使用

✅ 特性总结

🎯 解决的问题

🕒 版本历史

💬 用户评价

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

AI开发者

产品经理

商业分析师

电商运营人员

法律从业者

财务规划师

市场营销人员

品牌营销人员

新媒体运营

提示词工程

数据分析

写作

内容创作

内容营销

SEO

工具

商业战略

策略

DeepSeek

OpenAI

Claude

Gemini

Grok

Qwen

Kimi

本地化翻译器

参数填写器

Web chat适配器

个性化调校

API动态调校

网页列表生成器

🎯 可自定义参数（3个）

🎨 效果示例

HTML代码

CSS样式

使用说明

兼容性说明

HTML代码

CSS样式

使用说明

兼容性说明

HTML代码

CSS样式

使用说明

）。

兼容性说明

示例详情

📖 如何使用

✅ 特性总结

🎯 解决的问题

🕒 版本历史

💬 用户评价

提交反馈

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

反馈问题