页脚标准规范

三段结构：品牌区（LOGO + 字标 + 一句定位）· 导航列（2–3 列） · 合规底栏（版权 + ICP 备案 + 公安网安备案）。

单行：小字标 + 版权 + 备案。给体量小的 demo / 内页用，不喧宾夺主。加 compact 类即可。

同一结构、同一令牌族，仅换底色。加 dark 类。亮/暗共用一套 HTML，便于跨站统一。

两段：组件 CSS（一次引入）+ 完整版 HTML（按需替换 data-* 槽）。极简版只需加 compact，深色加 dark。底栏年份由文末脚本自动更新。

① 组件 CSS

复制/* ===== footer-std · 页脚标准组件 ===== */
.footer-std{font-family:system-ui,sans-serif;background:#efe8da;border-top:1px solid #ddd2bf;color:#5c544a}
.footer-std .fwrap{max-width:1100px;margin:0 auto;padding:40px 24px 22px}
.footer-std .ftop{display:flex;flex-wrap:wrap;gap:34px 56px;justify-content:space-between}
.footer-std .fbrand{max-width:340px}
.footer-std .flogo{display:inline-flex;align-items:center;gap:11px;color:#241f1a;text-decoration:none}
.footer-std .flogo .mark{width:34px;height:34px;flex:0 0 auto}
.footer-std .flogo .word{font-family:"Songti SC",serif;font-size:20px;font-weight:700;letter-spacing:.04em}
.footer-std .flogo .word small{display:block;font-family:system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.32em;color:#9c5a2a;text-transform:uppercase;margin-top:2px}
.footer-std .ftag{margin:14px 0 0;font-size:13.5px;line-height:1.7}
.footer-std .fcols{display:flex;flex-wrap:wrap;gap:34px 52px}
.footer-std .fcol h4{margin:0 0 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9c5a2a;font-weight:700}
.footer-std .fcol a{display:block;color:#5c544a;text-decoration:none;font-size:14px;padding:4px 0;transition:color .15s}
.footer-std .fcol a:hover{color:#9c5a2a}
.footer-std .fbar{margin-top:30px;padding-top:18px;border-top:1px solid #ddd2bf;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:12.5px}
.footer-std .fbar .sep{opacity:.4}
.footer-std .fbar a{color:#5c544a;text-decoration:none}.footer-std .fbar a:hover{color:#9c5a2a}
.footer-std .fbar .gov{display:inline-flex;align-items:center;gap:6px}
.footer-std .fbar .gov .badge{width:14px;height:14px;opacity:.7}
.footer-std .fbar .right{margin-left:auto;opacity:.85}
/* 极简版 */
.footer-std.compact .fwrap{padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.footer-std.compact .ftop,.footer-std.compact .ftag{display:none}
.footer-std.compact .fbar{margin:0;padding:0;border:0;flex:1}
.footer-std.compact .flogo .word{font-size:16px}.footer-std.compact .flogo .word small{display:none}
.footer-std.compact .flogo .mark{width:26px;height:26px}
/* 暗色变体 */
.footer-std.dark{background:#16130f;border-top-color:#2c2620;color:#9a9085}
.footer-std.dark .flogo{color:#f3ede1}.footer-std.dark .flogo .word small{color:#b9763f}
.footer-std.dark .ftag,.footer-std.dark .fcol a,.footer-std.dark .fbar a,.footer-std.dark .fbar .right{color:#9a9085}
.footer-std.dark .fcol h4{color:#b9763f}
.footer-std.dark .fcol a:hover,.footer-std.dark .fbar a:hover{color:#e8b888}
.footer-std.dark .fbar,.footer-std.dark .fbar{border-top-color:#2c2620}

② 完整版 HTML

复制<footer class="footer-std">
  <div class="fwrap">
    <div class="ftop">
      <div class="fbrand">
        <a class="flogo" href="/">
          <!-- LOGO 槽:替换为子站自己的 SVG / <img> -->
          <svg class="mark" viewBox="0 0 40 40">...</svg>
          <span class="word">造物云<small>ZAOWUYUN</small></span>
        </a>
        <p class="ftag">一句话定位</p>
      </div>
      <div class="fcols">
        <div class="fcol"><h4>产品</h4><a href="#">…</a></div>
        <!-- 2–3 列 -->
      </div>
    </div>
    <div class="fbar">
      <span>© <span data-year>2026</span> 造物云 · 浙江大学国际设计研究院出品</span>
      <span class="sep">|</span>
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">浙ICP备2021038972号-1</a>
      <span class="sep">|</span>
      <a class="gov" href="https://beian.mps.gov.cn/#/query/webSearch?code=33010602013219" target="_blank" rel="noopener">
        <svg class="badge" …>…</svg> 浙公网安备 33010602013219号</a>
    </div>
  </div>
</footer>
<!-- 年份自动更新 -->
<script>document.querySelectorAll('[data-year]').forEach(e=>e.textContent=new Date().getFullYear())</script>