制作本地静态模版

通用型企业静态网站生成与制作规范，适用于任何行业的官网、产品展示站、品牌宣传站等静态网站项目。本文档供 AI 辅助生成网站时参考使用。

一、项目目录结构

1.1 标准结构

  1. 项目文件夹/
  2. ├── index.html          # 首页（必需）
  3. ├── about.html          # 关于我们/介绍页（可选）
  4. ├── list.html           # 列表页（可选，如新闻/产品/案例列表）
  5. ├── detail.html         # 详情页（可选，如新闻/产品/案例详情）
  6. ├── css/                # 样式文件目录（可选）
  7. │   └── style.css
  8. ├── js/                 # 脚本文件目录（可选）
  9. │   └── main.js
  10. └── images/             # 图片资源目录（可选）
  11.     ├── logo.png
  12.     ├── banner.jpg
  13.     └── ...

1.2 结构说明

文件/目录是否必需说明
index.html✅ 必需网站首页，任何网站至少需要一个 HTML 文件
about.html❌ 可选关于我们/公司介绍页，无此需求可不建
list.html❌ 可选列表页（新闻/产品/案例等），无此需求可不建
detail.html❌ 可选详情页（新闻/产品/案例等），无此需求可不建
css/❌ 可选外部样式文件目录。若样式全部内联在 HTML 中，可省略
js/❌ 可选外部脚本文件目录。若页面无 JS 交互，可省略
images/❌ 可选图片资源目录。若页面无图片，可省略

1.3 灵活裁剪原则

二、HTML 文件通用规范

2.1 文件命名

2.2 基础结构

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta name="description" content="网站描述，用于SEO">
  7.   <meta name="keywords" content="关键词1,关键词2,关键词3">
  8.   <title>页面标题 - 网站名称</title>
  9.   <!-- 内联样式或外部CSS引用 -->
  10.   <style></style>
  11.   <!-- 或 <link rel="stylesheet" href="css/style.css"> -->
  12. </head>
  13. <body>
  14.   <!-- 公共头部导航 -->
  15.   <nav class="nav">...</nav>
  17.   <!-- 页面主体内容 -->
  18.   <main>...</main>
  20.   <!-- 公共页脚 -->
  21.   <footer class="footer">...</footer>
  23.   <!-- 内联脚本或外部JS引用 -->
  24.   <script></script>
  25.   <!-- 或 <script src="js/main.js"></script> -->
  26. </body>
  27. </html>

2.3 必须包含的 meta 标签

  1. <meta charset="UTF-8">
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. <title>页面标题</title>

三、公共元素规范（重点）

3.1 核心原则

所有页面中显示相同的元素区块，其 HTML 代码必须完全一致。

这样做的目的：

  1. 后续可以轻松抽离为公共组件/模板
  2. 保证全站视觉统一
  3. 减少维护成本，修改一处全站生效

3.2 必须保持一致的公共元素

元素说明一致性要求
头部导航栏 <nav>包含 Logo、导航菜单、联系方式等HTML 结构、CSS 类名、内容完全一致
页脚 <footer>包含版权信息、联系方式、友情链接等HTML 结构、CSS 类名、内容完全一致
浮动客服按钮如有，所有页面位置和样式一致完全一致
返回顶部按钮如有，所有页面位置和样式一致完全一致

3.3 公共导航栏示例

  1. <!-- 所有页面的这段代码必须完全相同 -->
  2. <nav class="nav" id="nav">
  3.   <div class="container nav-inner">
  4.     <a href="index.html" class="nav-logo">
  5.       <img src="images/logo.png" alt="公司名称" class="nav-logo-img">
  6.       <div class="nav-logo-text">公司名称<small>品牌标语</small></div>
  7.     </a>
  8.     <div class="nav-links" id="navLinks">
  9.       <a href="index.html" class="active">首页</a>
  10.       <a href="about.html">关于我们</a>
  11.       <a href="index.html#services">产品服务</a>
  12.       <a href="index.html#cases">成功案例</a>
  13.       <a href="list.html">新闻动态</a>
  14.       <a href="index.html#contact">联系我们</a>
  15.     </div>
  16.     <button class="nav-toggle" id="navToggle" aria-label="菜单">
  17.       <span></span><span></span><span></span>
  18.     </button>
  19.   </div>
  20. </nav>

3.4 公共页脚示例

  1. <!-- 所有页面的这段代码必须完全相同 -->
  2. <footer class="footer">
  3.   <div class="container footer-inner">
  4.     <div class="footer-top">
  5.       <div class="footer-brand">
  6.         <img src="images/logo.png" alt="公司名称">
  7.         <p>公司简介一句话...</p>
  8.       </div>
  9.       <div class="footer-contact">
  10.         <h4>联系我们</h4>
  11.         <p>地址：xxx</p>
  12.         <p>电话：xxx</p>
  13.         <p>邮箱：xxx</p>
  14.       </div>
  15.       <div class="footer-qrcode">
  16.         <img src="images/qrcode.png" alt="微信二维码">
  17.         <p>扫码添加客服</p>
  18.       </div>
  19.     </div>
  20.     <div class="footer-bottom">
  21.       <p>© 2024 公司名称 版权所有 | 备案号：xxx</p>
  22.     </div>
  23.   </div>
  24. </footer>

3.5 导航栏 active 状态处理

四、CSS 样式规范

4.1 样式放置方式

推荐：内联样式（小型静态网站）

  1. <head>
  2.   <style>
  3.     
  4.   </style>
  5. </head>

优点：

外部样式（大型项目）

  1. <link rel="stylesheet" href="css/style.css">

4.2 CSS 变量（推荐）

使用 CSS 变量统一管理颜色、字体等，便于全站风格调整：

  1. :root {
  2.   
  3.   --primary: #c9a96e;
  4.   --primary-dark: #a88b4f;
  6.   
  7.   --bg: #0a0a0a;
  8.   --bg2: #141414;
  9.   --bg3: #1a1a1a;
  11.   
  12.   --text: #ffffff;
  13.   --text2: #cccccc;
  14.   --text3: #999999;
  16.   
  17.   --line: rgba(255,255,255,0.1);
  19.   
  20.   --container: 1200px;
  22.   
  23.   --radius: 8px;
  24. }

4.3 盒模型统一

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }

4.4 容器布局

  1. .container {
  2.   max-width: var(--container);
  3.   margin: 0 auto;
  4.   padding: 0 20px;
  5.   width: 100%;
  6. }

4.5 响应式设计规范

断点设置

断点设备说明
> 1024px电脑端基础样式，多列布局
768px - 1024px平板端调整为2列布局，字体微调
< 768px手机端单列布局，导航折叠为汉堡菜单

响应式写法

  2. .grid {
  3.   display: grid;
  4.   grid-template-columns: repeat(3, 1fr);
  5.   gap: 30px;
  6. }
  9. @media (max-width: 1024px) {
  10.   .grid {
  11.     grid-template-columns: repeat(2, 1fr);
  12.     gap: 20px;
  13.   }
  14. }
  17. @media (max-width: 768px) {
  18.   .grid {
  19.     grid-template-columns: 1fr;
  20.     gap: 16px;
  21.   }
  22. }

响应式图片

  1. img {
  2.   max-width: 100%;
  3.   height: auto;
  4.   display: block;
  5. }

禁止水平滚动

  1. html, body {
  2.   overflow-x: hidden;
  3. }

4.6 导航栏固定规范

  1. .nav {
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   right: 0;
  6.   z-index: 1000;
  7.   
  8.   padding: 18px 0;
  9.   background: rgba(8,8,8,0.96);
  10.   border-bottom: 1px solid var(--line);
  11.   
  12.   -webkit-font-smoothing: antialiased;
  13.   -moz-osx-font-smoothing: grayscale;
  14. }

⚠️ 重要：导航栏高度应固定，不要通过 JavaScript 在滚动时改变 padding/高度，否则会触发浏览器重绘导致字体短暂模糊。

五、JavaScript 规范

5.1 脚本放置位置

推荐：放在 </body> 前

  1.   <script>
  2.     // 脚本内容
  3.   </script>
  4. </body>

5.2 移动端汉堡菜单

  1. var toggle = document.getElementById('navToggle');
  2. var links = document.getElementById('navLinks');
  4. toggle.addEventListener('click', function() {
  5.   links.classList.toggle('open');
  6. });
  8. // 点击导航链接后关闭菜单
  9. links.querySelectorAll('a').forEach(function(a) {
  10.   a.addEventListener('click', function() {
  11.     links.classList.remove('open');
  12.   });
  13. });

5.3 平滑滚动

  2. html {
  3.   scroll-behavior: smooth;
  4. }

5.4 避免的操作

六、图片资源规范

6.1 图片格式选择

格式适用场景优点
jpg / jpeg照片、banner、产品图体积小，色彩丰富
pngLogo、图标、透明背景图支持透明，清晰度高
webp所有图片（现代浏览器）体积最小，支持透明
svg图标、Logo（矢量）无限缩放，体积小
mp4背景视频、产品展示动态展示

6.2 图片命名规范

6.3 图片路径引用

  1. <!-- 正确：相对路径 -->
  2. <img src="images/logo.png" alt="Logo">
  4. <!-- 背景图 -->
  5. <div style="background-image: url('images/banner.jpg');"></div>

6.4 图片懒加载

  1. <img src="images/product.jpg" alt="产品图" loading="lazy">

6.5 背景视频规范

  1. <video class="hero-video-bg" muted playsinline preload="auto">
  2.   <source src="images/background.mp4" type="video/mp4">
  3. </video>