这份黄冈企业站资料包采用静态网页结构，提供首页源码、统一样式、目录说明和部署步骤，可用于展示企业介绍、服务项目、案例及联系方式。下方代码可分别保存为对应文件；企业名称、业务文字、联系字段和图片需由使用者自行替换。源码取用与域名、服务器、备案、素材授权及后续维护是不同事项，不能据此认定这些环节都永久免费。

资料包目录与文件用途

源码不绑定特定建站平台，首页由一个 HTML 文件和一个 CSS 文件组成。服务、企业介绍、案例、联系四个栏目放在同一张长页中，访客可从顶部菜单跳转。暂不附加 JavaScript 文件：当前示例不依赖脚本即可展示文字与栏目。

huanggang-site/
├── index.html
├── css/
│   └── style.css
├── assets/
│   └── images/
└── README.txt

• index.html：企业首页源码，包含企业介绍、服务项目、案例展示和联系区域。
• css/style.css：设置字体、颜色、栏目间距、服务卡片和手机端排列。
• assets/images/：存放获得使用许可的企业标志、门店照片和项目图片；示例未引用虚构图片。
• README.txt：记录保存方式、替换位置、预览步骤和授权提醒。

首页源码（保存为 index.html）

将下面源码保存为 UTF-8 编码的 index.html。示例中的企业名称、业务描述、电话和地址均为替换提示，不代表黄冈某家真实企业。菜单跳转到同一份文件中的栏目，不需要另外创建四份空白网页。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄冈企业名称｜主营服务</title>
  <meta name="description" content="替换为企业主营业务与服务区域简介">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="site-header">
    <div class="brand">黄冈企业名称</div>
    <nav aria-label="主导航">
      <a href="#about">企业介绍</a>
      <a href="#services">服务项目</a>
      <a href="#cases">案例展示</a>
      <a href="#contact">联系我们</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <p class="eyebrow">服务区域：替换为实际经营范围</p>
      <h1>用一句话说明企业主营业务</h1>
      <p>写清服务对象、主要工作和客户可以获得的帮助。</p>
    </section>

    <section id="about" class="section">
      <h2>企业介绍</h2>
      <p>填写企业实际经营方向、团队分工与服务流程。未经核实的成立时间、资质和合作经历不要写入。</p>
    </section>

    <section id="services" class="section">
      <h2>服务项目</h2>
      <div class="cards">
        <article class="card">
          <h3>服务项目一</h3>
          <p>说明具体工作、交付事项和适用客户。</p>
        </article>
        <article class="card">
          <h3>服务项目二</h3>
          <p>写明服务范围、办理步骤或合作方式。</p>
        </article>
        <article class="card">
          <h3>服务项目三</h3>
          <p>按企业实际业务补充服务说明，不适用的项目可删除。</p>
        </article>
      </div>
    </section>

    <section id="cases" class="section">
      <h2>案例展示</h2>
      <article class="card">
        <h3>案例名称（取得发布许可后填写）</h3>
        <p>按客户需求、完成事项、实际效果介绍项目；未获许可时不要披露客户姓名、照片或业务细节。</p>
      </article>
    </section>

    <section id="contact" class="section contact">
      <h2>联系我们</h2>
      <p>电话：替换为企业公开联系电话</p>
      <p>地址：替换为实际经营地址</p>
      <p>营业时间：按实际安排填写</p>
    </section>
  </main>

  <footer class="site-footer">
    黄冈企业名称｜按实际情况填写版权与备案资料
  </footer>
</body>
</html>

样式文件与布局参数

将以下代码保存为 css/style.css。颜色、宽度和断点集中在样式规则中，调整这些值即可改变首页观感；手机窄屏下服务卡片自动改为单列。

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: #263445;
  background: #f5f7fa;
  font-family: sans-serif;
  line-height: 1.7;
}
.site-header, main, .site-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
}
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #ffffff;
}
.brand {
  font-weight: 700;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
nav a {
  color: #24558a;
  text-decoration: none;
}
.hero {
  padding: 64px 28px;
  color: #ffffff;
  background: #24558a;
}
.hero h1 {
  margin: 8px 0;
}
.eyebrow {
  margin: 0;
}
.section {
  padding: 32px 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.card, .contact {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
}
.site-footer {
  color: #526174;
}
@media (max-width: 680px) {
  .site-header {
    display: block;
  }
  nav {
    margin-top: 12px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 40px 20px;
  }
}

需要添加项目照片时，将获准使用的图片放入 assets/images/，再在案例栏目中填写对应图片路径和描述。文件名可采用“门店服务区.jpg”或“项目施工记录.jpg”等能说明拍摄场景的名称；不要使用含有客户隐私或未获授权人物肖像的照片。

替换资料与检查步骤

• 企业名称：替换浏览器标题、顶部名称和页脚名称，检查三处是否一致。
• 主营业务：在首屏写清服务对象、经营区域和主要工作，避免只留下“欢迎访问”等空泛文字。
• 服务项目：为每张服务卡片填写实际工作、交付事项与适用客户；删除企业不提供的项目。
• 案例说明：按客户需求、完成事项和实际效果组织文字；未取得授权时，不公开客户身份及项目细节。
• 联系字段：填入企业核实过的电话、地址和营业时间；演示提示文字应在发布前替换或删除。

修改后先用浏览器打开本地 index.html，逐项点击顶部菜单，查看栏目跳转、文字换行和卡片排列。再把浏览器窗口缩窄至手机尺寸附近，确认导航不会挤出屏幕、服务卡片会变成单列，并检查联系电话与地址是否完整。

部署说明与使用边界

1. 按目录建立 huanggang-site 文件夹，将首页、样式文件和图片分别保存到对应位置。
2. 在网站托管服务提供的文件管理工具中，找到站点根目录，将 index.html、css 文件夹及需要发布的素材上传到对应位置。
3. 依据域名服务商与托管服务商给出的配置要求完成域名解析；如需启用 HTTPS，按托管方提供的证书流程办理。
4. 用实际域名打开首页，复查菜单跳转、手机端排列、图片路径和联系字段；发现样式缺失时，先核对 css/style.css 的目录位置与文件名大小写。
5. 更新企业文字或图片后重新上传对应文件，并再次检查公开效果；定期确认电话、地址和营业时间仍然准确。

静态源码适合展示企业介绍、服务项目、案例和联系方式。在线提交、会员登录、订单处理及数据管理需要额外的程序与安全设计，单靠 HTML 和 CSS 无法完成。标题中的“永久免费”仅可理解为源码按其授权条款允许免费取用，不代表域名、主机、商业字体、图片素材、定制开发或维护服务一律零费用。发布前请阅读随包授权说明，并确认自行提供的文字、图片和标志具备公开使用许可。