• 111
  • > 通用型企业静态网站生成与制作规范，适用于任何行业的官网、产品展示站、品牌宣传站等静态网站项目。本文档供 AI 辅助生成网站时参考使用。 --- ## 一、项目目录结构 ### 1.1 标准结构 ``` 项目文件夹/ ├── index.html # 首页（必需） ├── about.html # 关于我们/介绍页（可选） ├── list.html # 列表页（可选，如新闻/产品/案例列表） ├── detail.html # 详情页（可选，如新闻/产品/案例详情） ├── css/ # 样式文件目录（可选） │ └── style.css ├── js/ # 脚本文件目录（可选） │ └── main.js └── images/ # 图片资源目录（可选） ├── logo.png ├── banner.jpg └── ... ``` ### 1.2 结构说明 | 文件/目录 | 是否必需 | 说明 | |----------|---------|------| | `index.html` | ✅ 必需 | 网站首页，任何网站至少需要一个 HTML 文件 | | `about.html` | ❌ 可选 | 关于我们/公司介绍页，无此需求可不建 | | `list.html` | ❌ 可选 | 列表页（新闻/产品/案例等），无此需求可不建 | | `detail.html` | ❌ 可选 | 详情页（新闻/产品/案例等），无此需求可不建 | | `css/` | ❌ 可选 | 外部样式文件目录。若样式全部内联在 HTML 中，可省略 | | `js/` | ❌ 可选 | 外部脚本文件目录。若页面无 JS 交互，可省略 | | `images/` | ❌ 可选 | 图片资源目录。若页面无图片，可省略 | ### 1.3 灵活裁剪原则 - **单页网站**：只需 `index.html` + 所需资源文件夹 - **无 JS 交互**：不需要 `js/` 文件夹 - **无图片**：不需要 `images/` 文件夹 - **样式内联**：不需要 `css/` 文件夹（推荐小型项目内联样式，减少 HTTP 请求） - **页面命名**：可根据实际需求命名，如 `product.html`、`contact.html`、`case.html` 等 --- ## 二、HTML 文件通用规范 ### 2.1 文件命名 - 全部使用**小写字母**，单词间用 `-` 连接 - 示例：`index.html`、`about-us.html`、`news-list.html`、`product-detail.html` - 禁止使用中文、空格、特殊字符 ### 2.2 基础结构 ```html 页面标题 - 网站名称
    ...
    ...
    ...
    ``` ### 2.3 必须包含的 meta 标签 ```html 页面标题 ``` --- ## 三、公共元素规范（重点） ### 3.1 核心原则 **所有页面中显示相同的元素区块，其 HTML 代码必须完全一致。** 这样做的目的： 1. 后续可以轻松抽离为公共组件/模板 2. 保证全站视觉统一 3. 减少维护成本，修改一处全站生效 ### 3.2 必须保持一致的公共元素 | 元素 | 说明 | 一致性要求 | |------|------|-----------| | 头部导航栏 `
    ` | 包含 Logo、导航菜单、联系方式等 | HTML 结构、CSS 类名、内容完全一致 | | 页脚 `
    ` | 包含版权信息、联系方式、友情链接等 | HTML 结构、CSS 类名、内容完全一致 | | 浮动客服按钮 | 如有，所有页面位置和样式一致 | 完全一致 | | 返回顶部按钮 | 如有，所有页面位置和样式一致 | 完全一致 | ### 3.3 公共导航栏示例 ```html
    公司名称
    公司名称品牌标语
    首页 关于我们 产品服务 成功案例 新闻动态 联系我们
    ``` ### 3.4 公共页脚示例 ```html
    公司名称

    公司简介一句话...

    联系我们

    地址：xxx

    电话：xxx

    邮箱：xxx

    微信二维码

    扫码添加客服

    © 2024 公司名称 版权所有 | 备案号：xxx

    ``` ### 3.5 导航栏 active 状态处理 - 当前页面对应的导航链接添加 `class="active"` - 其他页面的导航链接结构保持不变，仅修改 active 类的位置 --- ## 四、CSS 样式规范 ### 4.1 样式放置方式 **推荐：内联样式（小型静态网站）** ```html ``` 优点： - 减少 HTTP 请求，加载更快 - 单文件便于传输和部署 - 无需管理外部文件路径 **外部样式（大型项目）** ```html ``` ### 4.2 CSS 变量（推荐） 使用 CSS 变量统一管理颜色、字体等，便于全站风格调整： ```css :root { --primary: #c9a96e; --primary-dark: #a88b4f; --bg: #0a0a0a; --bg2: #141414; --bg3: #1a1a1a; --text: #ffffff; --text2: #cccccc; --text3: #999999; --line: rgba(255,255,255,0.1); --container: 1200px; --radius: 8px; } ``` ### 4.3 盒模型统一 ```css * { margin: 0; padding: 0; box-sizing: border-box; } ``` ### 4.4 容器布局 ```css .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; width: 100%; } ``` ### 4.5 响应式设计规范 #### 断点设置 | 断点 | 设备 | 说明 | |------|------|------| | `> 1024px` | 电脑端 | 基础样式，多列布局 | | `768px - 1024px` | 平板端 | 调整为2列布局，字体微调 | | `< 768px` | 手机端 | 单列布局，导航折叠为汉堡菜单 | #### 响应式写法 ```css .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 16px; } } ``` #### 响应式图片 ```css img { max-width: 100%; height: auto; display: block; } ``` #### 禁止水平滚动 ```css html, body { overflow-x: hidden; } ``` ### 4.6 导航栏固定规范 ```css .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; background: rgba(8,8,8,0.96); border-bottom: 1px solid var(--line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` > ⚠️ **重要**：导航栏高度应固定，不要通过 JavaScript 在滚动时改变 padding/高度，否则会触发浏览器重绘导致字体短暂模糊。 --- ## 五、JavaScript 规范 ### 5.1 脚本放置位置 **推荐：放在 `` 前** ```html ``` ### 5.2 移动端汉堡菜单 ```javascript var toggle = document.getElementById('navToggle'); var links = document.getElementById('navLinks'); toggle.addEventListener('click', function() { links.classList.toggle('open'); }); // 点击导航链接后关闭菜单 links.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { links.classList.remove('open'); }); }); ``` ### 5.3 平滑滚动 ```css html { scroll-behavior: smooth; } ``` ### 5.4 避免的操作 - ❌ 不要在滚动时频繁修改导航栏的 padding/高度（会导致字体模糊） - ❌ 不要使用 `document.write()` - ❌ 不要使用 `eval()` - ❌ 不要有阻塞页面渲染的长循环 --- ## 六、图片资源规范 ### 6.1 图片格式选择 | 格式 | 适用场景 | 优点 | |------|---------|------| | `jpg` / `jpeg` | 照片、banner、产品图 | 体积小，色彩丰富 | | `png` | Logo、图标、透明背景图 | 支持透明，清晰度高 | | `webp` | 所有图片（现代浏览器） | 体积最小，支持透明 | | `svg` | 图标、Logo（矢量） | 无限缩放，体积小 | | `mp4` | 背景视频、产品展示 | 动态展示 | ### 6.2 图片命名规范 - 全部小写，单词间用 `-` 连接 - 示例：`logo.png`、`banner-home.jpg`、`product-01.jpg`、`icon-phone.svg` - 禁止使用中文、空格、特殊字符 ### 6.3 图片路径引用 ```html Logo
    ``` ### 6.4 图片懒加载 ```html 产品图 ``` ### 6.5 背景视频规范 ```html ``` - 必须添加 `muted`（自动播放要求） - 必须添加 `playsinline`（iOS 兼容） - 建议使用静态图片作为占位，视频加载完成后淡入