这份9+1网站代码大全，按常见建站结构整理出9类可复用模块，再用1套组合模板把它们串成完整单页。示例以原生 HTML、CSS 和少量 JavaScript 编写，适合工作室作品展示、活动招募或个人作品集；替换工作室名称、项目文案、配色和图片地址，就能改成自己的版本。

9类常用网站模块

1. 顶部导航栏

   导航栏呈现工作室名称和主要入口。桌面端横向排列，窄屏时改为纵向菜单；“作品”“服务”“联系”等短标签能让访客快速找到目标区域。

   <nav class="nav"><strong>拾光工作室</strong><div><a href="#home">首页</a>　<a href="#work">作品</a>　<a href="#service">服务</a>　<a href="#contact">联系</a></div></nav>

2. 首屏横幅

   首屏用主标题讲清工作室擅长什么，副标题补充服务范围，再放一个直达作品区的按钮。纯色渐变适合没有现成摄影图的团队，也能减少大图加载等待。

   <header class="hero" id="home"><h1>让好创意清晰呈现</h1><p>品牌设计与网页视觉服务</p><a class="cta" href="#work">查看作品</a></header>

3. 卡片展示区

   卡片可以陈列品牌案例、网页项目或收费服务。给缩略图设置统一比例、给标题预留相近长度，多列排列时就不容易参差；手机窄屏可从三列切换为单列。

   <article class="card"><h3>山野咖啡品牌识别</h3><p>标志、包装与门店菜单设计</p></article>

4. 分类标签

   分类标签可把作品分成“全部”“网页设计”“品牌视觉”等组别。选中项使用醒目底色，其余选项保留浅色边框；配合筛选动作，访客可以只看感兴趣的案例。

   <div class="tags"><button data-filter="all">全部</button><button data-filter="web">网页设计</button><button data-filter="brand">品牌视觉</button></div>

5. 选项卡区域

   选项卡适合并列介绍服务范围与合作步骤。访客点选“服务内容”或“合作流程”时，只显示对应面板，让长篇说明不必连续铺开。

   <div class="tabs"><button data-tab="service">服务内容</button><button data-tab="process">合作流程</button></div><section data-panel="service">品牌识别、网页视觉与作品整理</section><section data-panel="process" hidden>需求沟通、方案确认、设计交付</section>

6. 折叠问答

   常见问题可以用原生折叠组件收纳。访客点开“通常多久完成？”就能查看周期说明，不必额外安装插件；适合回答交付时间、文件格式和修改轮次等具体问题。

   <details><summary>通常多久完成？</summary><p>品牌识别项目通常分三轮交付，周期约为10个工作日。</p></details>

7. 进度条

   进度条可展示作品制作阶段、课程完成比例或活动报名进度。原生 progress 元素通过当前值与最大值呈现比例，例如 value 为 72、max 为 100 时显示 72%。

   <label>品牌识别项目进度<progress value="72" max="100">72%</progress></label>

8. 轻提示消息

   轻提示适合反馈“邮箱已复制”或“提交成功”等短状态。访客完成操作后，在屏幕下方显示提示并于数秒后收起；重要的联系地址仍应留在页脚，方便再次查看。

   <div class="toast" role="status" hidden>邮箱已复制：[email protected]</div>

9. 页脚联系区

   页脚集中展示工作室名称、服务范围和联系渠道。写上常用邮箱及所在城市，访客浏览完案例后就能直接发起咨询；简短分行比堆叠多段介绍更容易扫读。

   <footer id="contact"><p>拾光工作室 · 品牌设计与网页视觉</p><p>邮箱：[email protected] · 杭州</p></footer>

1套整合方案：单页作品展示模板

下面这套模板把导航栏、首屏横幅、作品卡片、分类筛选、选项卡、折叠问答、进度条、轻提示和页脚联系区全部组合起来。CSS 网格和媒体查询负责适配窄屏，少量 JavaScript 负责筛选作品、切换服务面板和复制邮箱。替换示例名称、项目介绍与邮箱后，就能作为工作室作品展示站的起点。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>拾光工作室</title>
<style>
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 sans-serif;color:#263238}
.nav,footer{padding:18px 8%;background:#f3f6f8}
.nav{display:flex;justify-content:space-between;gap:16px}
.nav a{color:inherit;text-decoration:none}
.hero{text-align:center;padding:70px 16px;background:linear-gradient(135deg,#e8f4ff,#f7efff)}
.cta{display:inline-block;padding:10px 18px;background:#245b91;color:#fff;border-radius:6px;text-decoration:none}
.tags,.tabs{text-align:center;margin:24px}
button{padding:9px 14px;margin:4px;border:1px solid #cbd6df;border-radius:6px;background:#fff;cursor:pointer}
button[aria-pressed="true"]{background:#245b91;color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 8%}
.card,details,[data-panel]{padding:20px;border:1px solid #dce3e8;border-radius:10px}
progress{display:block;width:100%;height:18px}
section.info{padding:24px 8%}
.toast{position:fixed;right:20px;bottom:20px;padding:12px 18px;background:#263238;color:#fff;border-radius:8px}
[hidden]{display:none!important}
@media(max-width:650px){.grid{grid-template-columns:1fr}.nav{display:block}.hero{padding:48px 16px}}
</style>
<nav class="nav">
  <strong>拾光工作室</strong>
  <div><a href="#home">首页</a>　<a href="#work">作品</a>　<a href="#service">服务</a>　<a href="#contact">联系</a></div>
</nav>
<header class="hero" id="home">
  <h1>让好创意清晰呈现</h1>
  <p>为独立品牌与小团队提供视觉设计服务</p>
  <a class="cta" href="#work">查看作品</a>
</header>
<main>
  <section id="work">
    <h2>精选作品</h2>
    <div class="tags">
      <button data-filter="all" aria-pressed="true">全部</button>
      <button data-filter="web" aria-pressed="false">网页设计</button>
      <button data-filter="brand" aria-pressed="false">品牌视觉</button>
    </div>
    <div class="grid">
      <article class="card" data-kind="brand"><h3>山野咖啡</h3><p>标志、包装与门店菜单设计</p></article>
      <article class="card" data-kind="web"><h3>云栖民宿</h3><p>预约流程与房型展示设计</p></article>
      <article class="card" data-kind="brand"><h3>拾味烘焙</h3><p>品牌色彩与产品包装设计</p></article>
    </div>
  </section>
  <section class="info" id="service">
    <h2>服务与进度</h2>
    <div class="tabs">
      <button data-tab="service" aria-pressed="true">服务范围</button>
      <button data-tab="process" aria-pressed="false">合作步骤</button>
    </div>
    <div data-panel="service">品牌识别、网页视觉、包装与作品整理</div>
    <div data-panel="process" hidden>需求沟通、方案确认、设计交付</div>
    <p>当前项目进度：<progress value="72" max="100">72%</progress></p>
    <button id="copyEmail">复制联系邮箱</button>
    <details><summary>通常多久完成？</summary><p>品牌识别项目通常分三轮交付，周期约为10个工作日。</p></details>
  </section>
</main>
<div class="toast" id="toast" role="status" hidden></div>
<footer id="contact"><p>拾光工作室 · 品牌设计与网页视觉</p><p>邮箱：[email protected] · 杭州</p></footer>
<script>
const filters=[...document.querySelectorAll("[data-filter]")];
const cards=[...document.querySelectorAll("[data-kind]")];
filters.forEach(button=>button.addEventListener("click",()=>{
  const type=button.dataset.filter;
  cards.forEach(card=>card.hidden=type!=="all"&&card.dataset.kind!==type);
  filters.forEach(item=>item.setAttribute("aria-pressed",String(item===button)));
}));
const tabs=[...document.querySelectorAll("[data-tab]")];
const panels=[...document.querySelectorAll("[data-panel]")];
tabs.forEach(button=>button.addEventListener("click",()=>{
  const name=button.dataset.tab;
  panels.forEach(panel=>panel.hidden=panel.dataset.panel!==name);
  tabs.forEach(item=>item.setAttribute("aria-pressed",String(item===button)));
}));
const toast=document.querySelector("#toast");
document.querySelector("#copyEmail").addEventListener("click",async()=>{
  try{
    await navigator.clipboard.writeText("[email protected]");
    toast.textContent="邮箱已复制：[email protected]";
  }catch{
    toast.textContent="请手动记录：[email protected]";
  }
  toast.hidden=false;
  window.setTimeout(()=>toast.hidden=true,2400);
});
</script>
</html>

实际拼装时，先确定导航入口与首屏主张，再替换三张作品卡片的项目名称和服务描述，最后检查邮箱、品牌色与窄屏排列。把重复样式集中在 CSS 规则中，之后调整按钮颜色、卡片间距或手机端列数，只需修改对应数值即可。