网页列表生成器

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）。