FOOTER & SHELL
三栏文档布局Three-column Docs
左导航 + 中正文 + 右页内目录（TOC）的三栏文档骨架。右侧目录随滚动高亮当前小节，是长文档的必备件。
效果预览
适合用在哪
开发文档、产品手册、帮助中心。移动端右栏收起、左栏变抽屉。
容易踩的坑
- 三栏同时滚动却没给左右栏设 sticky 和独立滚动，读到中段时目录早已滚出视口。
- 1024px 以下仍保留三栏，正文被挤到每行不足 40 字，阅读体验崩坏。
- Scrollspy 对短小节判定失准，点击目录后高亮跳到下一节，用户以为定位错了。
设计提示词 · Prompt
三栏文档布局（Three-column Docs）：flex 三段。左栏 180-260px、浅灰底、右细线分隔，内放分组标题（8px 大写浅灰）+ 若干 8.5px 链接，当前项用主色加粗。中栏 flex:1、内边距 10-32px，承载正文：11px 加粗页标题 + 若干浅灰占位行（真实内容里是 md 渲染结果）。右栏 140-200px、左细线分隔，内放「本页目录」的二级/三级链接，随滚动用 IntersectionObserver 高亮当前节（Scrollspy）。正文最大宽度建议另加限制（65-75ch）保证可读性，即使中栏很宽。
Three-column Docs: three flex sections. The left column is 180-260px wide with a light-gray background and a thin right divider, holding group headings (8px uppercase light gray) + several 8.5px links, with the active item bold in the primary color. The middle column is flex:1 with 10-32px padding and holds the body: an 11px bold page title + several light-gray placeholder lines (rendered Markdown in real content). The right column is 140-200px with a thin left divider, holding "On this page" second- and third-level links, highlighting the current section on scroll via IntersectionObserver (Scrollspy). Add a separate max width to the body text (65-75ch) for readability even when the middle column is wide.
常见搭配
同一页面里经常和「三栏文档布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-docs">
<div class="sh-docs__l"><b>开始</b><a class="is-on">快速上手</a><a>安装</a><a>配置</a><b style="margin-top:8px">指南</b><a>组件</a><a>主题</a></div>
<div class="sh-docs__m">
<h4>快速上手</h4>
<i></i><i class="w82"></i><i class="w60"></i><i></i><i class="w60"></i><i class="w82"></i><i></i>
</div>
<div class="sh-docs__r"><b>本页目录</b><a>安装</a><a>引入样式</a><a>使用组件</a><a>常见问题</a></div>
</div>