必须显式写 border:0 none;。2. 章节编号方块用 inline span<p style="margin:28px 0 18px;font-size:20px;font-weight:bold;color:#1a1a1a;">
<span style="display:inline-block;background:#4a6cf7;color:#fff;font-size:14px;font-weight:bold;text-align:center;width:28px;height:28px;line-height:28px;border-radius:6px;margin-right:10px;vertical-align:middle;">1</span>
标题文字
</p>
3. 标签/胶囊组件用 span 排列禁止 table(微信给 table 加默认 border,标签间出现白线): <p><span style="display:inline-block;padding:4px 10px;background:#eee;border-radius:12px;font-size:12px;margin:0 4px;">标签</span></p>
4. 流程图一律垂直排列手机屏幕 320-375px,水平排列必断行。用纯 垂直堆叠 + ↓ 箭头连接。 5. 代码块用逐行 微信覆盖 的 white-space,代码挤成一行。解决: <table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td style="background:#1e1e2e;border-radius:8px;padding:16px 0;">
<p style="font-family:Menlo,Consolas,monospace;font-size:13px;line-height:1.6;margin:0;padding:0 16px;color:#d4d4d4;">代码行</p>
</td></tr></table>
缩进用 ,空行用 。 6. 箭头/连接符用 居中<p style="text-align:center;font-size:20px;color:#4a6cf7;margin:6px 0;line-height:1;">↓</p>
7. table 仅用于数据展示,不用于布局左列窄(放图标)右列宽放文字 → 微信会压缩左列。改用纵向排列。
常用组件模板引言/高亮框<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="4" style="background:#4a6cf7;border:0 none;"></td>
<td style="background:#f5f7ff;padding:18px 20px;border:0 none;">
<p style="font-size:15px;color:#444;line-height:2;margin:0;">引言内容</p>
</td>
</tr></table>
数据卡片(2x2 宫格)<table cellpadding="0" cellspacing="8" border="0" width="100%">
<tr>
<td width="50%" style="background:#fef2f2;border-radius:10px;padding:14px 16px;border:0 none;">
<p style="font-size:11px;color:#999;margin:0 0 2px;">标签</p>
<p style="font-size:26px;font-weight:bold;color:#c62828;margin:0;">数据</p>
</td>
<td width="50%" style="background:#f0fdf4;border-radius:10px;padding:14px 16px;border:0 none;">
<p style="font-size:11px;color:#999;margin:0 0 2px;">标签</p>
<p style="font-size:26px;font-weight:bold;color:#2e7d32;margin:0;">数据</p>
</td>
</tr></table>
暗色重点框<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td style="background:#1a1a2e;border-radius:10px;padding:22px 20px;border:0 none;">
<p style="color:#ffd54f;font-size:15px;font-weight:bold;margin:0 0 10px;">核心观点</p>
<p style="font-size:14px;color:#ddd;line-height:2;margin:0;">内容</p>
</td></tr></table>
色块提示框<section style="background:#f5f3ff;border-left:4px solid #8b5cf6;padding:16px 20px;margin:16px 0;">
<p style="font-size:14px;color:#444;line-height:1.8;margin:0;">提示内容</p>
</section>
色系:洞察 #f5f3ff/#8b5cf6 | 技术 #eff6ff/#3b82f6 | 关键 #fff7ed/#f97316 | 对比 #f0fdf4/#22c55e 行内代码<code style="background:#e8e8f0;color:#5b6abf;padding:2px 6px;border-radius:3px;font-size:13px;">代码</code>
排版参数速查| 元素 | 字号 | 行高 | 颜色 |
|---|
| ------ | ------ | ------ | ------ | | 正文 | 15px | line-height:2 | #333 | | 小标题 | 17px | - | #333 加粗 | | 章节标题 | 20px | - | #1a1a1a 加粗 | | 数据大字 | 24-28px | line-height:1.2 | 主题色 加粗 | | 表格内容 | 13px | - | #666 | | 脚注 | 11px | line-height:2 | #bbb |
整体容器:max-width:680px; margin:0 auto; padding:20px 16px; font-size:15px; line-height:1.8; color:#2b2b2b; 字体栈:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif
文章结构模板标题区(居中)
├── 栏目标签(13px 灰色 letter-spacing:3px)
├── 主标题(22px 加粗)
├── 日期/阅读时长(12px 灰色)
└── 分隔线(border-bottom:1px solid #eee)
引言区(左色条 table)
章节 1-N
├── 编号标题(inline-span 方块 + 20px 文字)
├── 正文段落(15px line-height:2)
├── 组件(数据卡片/表格/代码块/暗色框)
└── 分隔符(· · · 居中 灰色 letter-spacing:6px)
结尾区(暗色圆角框 金色标题)
脚注(11px 灰色 border-top 分隔)
安全检测
腾讯云安全 (Sanbu)
安全,无风险
查看报告
🔗 相关推荐
ai-agent
pskoett 捕获经验教训、错误及修正内容,以实现持续改进。适用于以下场景:(1)命令或操作意外失败;(2)用户纠正Claude(如“不,那不对……”“实际上……”);(3)用户请求的功能不存在;(4)外部API或工具出现故障;(5)Claude发现自身
★ 4,082
📥 810,066
ai-agent
ivangdavila 自我反思+自我批评+自我学习+自组织记忆。智能体评估自身工作、发现错误并持续改进。
★ 1,379
📥 320,419
ai-agent
spclaudehome AI智能体技能安全预审工具。安装ClawdHub、GitHub等来源技能前,检查风险信号、权限范围及可疑模式。
★ 1,227
📥 267,822
|