[网站模板] 创意机构五页响应式网站模板 | 作品筛选与询盘页 – Axioma

Axioma 是一套面向创意机构、独立设计工作室、品牌顾问和自由创意团队的多页 HTML 网站模板。它不是只展示一屏内容的单页落地页，而是把首页、作品、服务、工作室和联系五个页面组合成一套完整的营销网站，适合用来呈现案例、说明服务范围，并承接潜在客户的项目询盘。

模板使用原生 HTML、CSS 和 JavaScript 编写，不依赖 Bootstrap、React 等前端框架，也没有 npm 安装和构建步骤。解压后可以直接在浏览器中查看页面，替换文字、图片和联系方式后，可部署到普通主机、对象存储或静态网站托管环境。

五个页面如何组成一套完整的网站

这种五页信息架构更适合需要建立专业信任的服务型业务：首页负责建立第一印象，作品页提供能力证据，服务页说明交付范围，工作室页补充团队背景，联系页把访客引导到具体的项目沟通。

固定侧栏与编辑式排版是模板的主要视觉特征

桌面端采用左侧固定品牌和导航、右侧滚动内容的布局，页面内容不会被传统顶部导航反复切断。当屏幕宽度不超过 768px 时，侧栏会收起为顶部栏和覆盖式移动菜单，以适配手机浏览。

整体配色以纸张白 #F5F4F0 和墨黑 #0E0E0E 为主，再用荧光青柠色 #C8FF3D 强调按钮和行动区域。标题使用 Bricolage Grotesque，正文和等宽标签使用 Geist、Geist Mono；这些字体通过 Google Fonts 加载。如果正式部署环境无法稳定访问 Google Fonts，建议改为自托管字体，或配置本地字体栈。

原生文件结构便于直接替换内容

主要文案直接写在五个 HTML 文件中，可以通过搜索替换统一修改品牌名、标语、地址、邮箱、电话、团队成员、客户名称和奖项。全站颜色、字体、间距、导航宽度和动画参数集中在 assets/css/styles.css 顶部的 CSS 自定义属性中，适合先调整设计令牌，再逐页更新内容。

源码中的 SVG 图片是带有说明文字的占位图，不等于可以直接用于商业项目的摄影素材。README 为不同位置给出了参考尺寸：作品卡片为 1200×900，团队肖像为 600×750，工作室图片为 800×1000。正式上线前应替换为拥有使用权的图片，并同步检查 alt 文本和文件路径。当前源码包 README 标注为个人及商业使用，实际使用时仍应以 html.design 的许可条款为准。

脚本只提供展示所需的三类交互

• 滚动显现：通过 IntersectionObserver 为进入视口的元素添加状态类，动画主要改变透明度和位移。
• 移动导航：控制覆盖式菜单的开启、关闭、焦点状态和页面滚动。
• 作品筛选：读取案例卡片的 data-tags 属性切换显示项目，不依赖第三方筛选库。

模板还会识别 prefers-reduced-motion，访客开启系统的“减少动态效果”后，滚动动画会被跳过。README 列出的浏览器检查宽度包括 320、768、1024、1440 和 1920 像素；替换成长中文标题、真实图片或自定义内容后，仍需要重新检查响应式布局。

联系表单上线前必须补上后端

联系页已经准备了姓名、邮箱、公司、角色、项目类型、预算、计划启动时间、获知渠道和留言等字段，但源码包只有静态前端，没有邮件接口、数据库或表单服务。真正上线前，需要接入 Formspree、Netlify Forms、Cloudflare Workers、WordPress 接口或其他后端方案，并补充提交成功与失败提示、隐私说明和反垃圾措施。

作品筛选只是浏览器端对现有卡片进行隐藏和显示，并不是内容管理系统。如果后续需要频繁增加案例、由非技术人员维护，或需要多语言内容，建议把模板接入 WordPress、静态站点生成器或其他 CMS，而不是长期手工维护多个 HTML 文件。

建议按以下顺序完成二次修改

1. 解压源码后先打开 index.html，确认本地页面、样式和脚本能够正常加载。
2. 在五个 HTML 文件中统一替换 Axioma 品牌名、演示邮箱、电话、地址、团队和客户信息。
3. 修改 CSS 自定义属性中的主色、字体和间距，保持五个页面的视觉一致性。
4. 按照 README 的尺寸建议替换作品、团队和工作室占位图，并检查图片路径与 ALT 文本。
5. 将联系表单接入可用的提交接口，实际测试成功、失败和重复提交场景。
6. 在手机、平板和桌面宽度下复查导航、长标题、作品筛选、表单及键盘操作，再部署到正式环境。