FOOTER & SHELL
多列页脚Multi-column Footer
最经典的白底四列页脚：四组链接并列，底部一条版权 + 语言切换。信息密度高但不压迫。
效果预览
适合用在哪
B 端产品官网、文档站、需要平铺大量入口的站点。
容易踩的坑
- 8.5px 浅灰链接在白底上对比度常低于 4.5:1，且行距过密难以点中。
- 语言切换器只用国旗图标，无法区分同一国家的多种语言。
- 四组链接未用 nav 加 aria-label 包裹，读屏用户无法快速定位页脚导航。
设计提示词 · Prompt
多列页脚（Multi-column Footer）：白底、细描边、圆角 11px。上半部分是 4 列等宽网格，每列一个 9px 加粗的分组标题 + 若干 8.5px 浅灰链接（行距 4-5px）。用 1px 浅线分隔后是底栏：左侧版权 8.5px 浅灰，右侧一个语言/地区切换器（细描边圆角、内放地球图标 + 当前语言 + 箭头）。分组命名要按用户的思维（「资源」「公司」「法务」），不要按内部部门。移动端 4 列折成 2 列。
Multi-column Footer: white background, thin border, 11px radius. The upper part is a 4-column equal-width grid, each column with a 9px bold group heading + several 8.5px light-gray links (4-5px line spacing). After a 1px light divider comes the bottom bar: 8.5px light-gray copyright on the left, and a language/region switcher on the right (thin border, rounded corners, containing a globe icon + current language + an arrow). Name groups the way users think ("Resources", "Company", "Legal"), not after internal departments. On mobile, fold the 4 columns into 2.
常见搭配
同一页面里经常和「多列页脚」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-cols">
<div class="sh-cols__g">
<div class="sh-cols__c"><b>产品</b><a>功能总览</a><a>定价方案</a><a>更新日志</a></div>
<div class="sh-cols__c"><b>资源</b><a>开发文档</a><a>组件示例</a><a>设计规范</a></div>
<div class="sh-cols__c"><b>公司</b><a>关于我们</a><a>加入我们</a><a>联系我们</a></div>
<div class="sh-cols__c"><b>法务</b><a>隐私政策</a><a>服务条款</a><a>安全说明</a></div>
</div>
<div class="sh-cols__bot">
<span>© 2026 UI Set</span>
<span class="sh-cols__lang">🌐 简体中文 ▾</span>
</div>
</div>