巨型页脚（Mega Footer）是什么：效果预览与 AI 设计提示词

效果预览

UI 模式词典

把散落的 UI 模式整理成可检索、可复制的提示词手册。

产品功能定价更新日志路线图

资源文档示例博客社区

公司关于招聘隐私条款

𝕏⌘in

适合用在哪

官网首页、需要承载大量内链的产品站。页脚是很多用户唯一会看到的导航。

容易踩的坑

半透明链接文字在 #0e0e13 底上透明度低于 0.6，对比度不足 4.5:1。
移动端仍保持 4 列网格，链接被挤成两三个字一行，点击区域过小。
每列堆 10 个以上链接，页脚变成站点地图垃圾场，用户找不到关键入口。

设计提示词 · Prompt

巨型页脚（Mega Footer）：深色底（#0e0e13）、白字、内边距 13-20px、圆角 11px。上半部分是 4 列网格（第一列略宽，如 1.4fr 1fr 1fr 1fr）：第一列放 logo（16px 圆角方块 + 11.5px 加粗品牌名）与一行 8.5px 半透明介绍；后三列每列一个 9px 大写的分组标签 + 若干 9px 半透明的链接，行距 5-7px。中间用 1px 半透明白线分隔，下半部分左右分布版权与社交图标（18px 圆形半透明白底）。链接 hover 时提亮到全白。

Mega Footer: dark background (#0e0e13), white text, 13-20px padding, 11px radius. The upper half is a 4-column grid (the first column slightly wider, e.g. 1.4fr 1fr 1fr 1fr): the first column holds the logo (a 16px rounded square + an 11.5px bold brand name) and an 8.5px semi-transparent one-line intro; each of the other three columns has a 9px uppercase group label + several 9px semi-transparent links, with 5-7px line spacing. A 1px semi-transparent white line separates the halves; the lower half spreads copyright and social icons (18px circles with semi-transparent white backgrounds) to left and right. Links brighten to full white on hover.

常见搭配

同一页面里经常和「巨型页脚」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

订阅页脚Newsletter Footer 语义地标Landmarks 暗色模式切换Dark Mode Toggle 安全信任徽章Trust Badge

演示 HTML 结构

<div class="sh-mega">
  <div class="sh-mega__top">
    <div class="sh-mega__bd">
      <div class="sh-mega__logo"><i></i>UI 模式词典</div>
      <p>把散落的 UI 模式整理成可检索、可复制的提示词手册。</p>
    </div>
    <div class="sh-mega__col"><b>产品</b><a>功能</a><a>定价</a><a>更新日志</a><a>路线图</a></div>
    <div class="sh-mega__col"><b>资源</b><a>文档</a><a>示例</a><a>博客</a><a>社区</a></div>
    <div class="sh-mega__col"><b>公司</b><a>关于</a><a>招聘</a><a>隐私</a><a>条款</a></div>
  </div>
  <div class="sh-mega__bot">
    <span>© 2026 UI Set. 保留所有权利</span>
    <div class="sh-mega__soc"><i>𝕏</i><i>⌘</i><i>in</i></div>
  </div>
</div>