黄州一家家政门店的经营者，可以用免费的 HTML、CSS 源码制作一张介绍服务、营业时间、地址和预约电话的静态网站；顾客用手机打开后即可查看服务范围并拨号咨询。下面从需求清单、文件编写、本地检查到托管发布逐步完成。源码不收授权费，但托管服务的免费额度和规则可能调整，因此任何人都无法保证第三方服务永久免费；要长期控制开支，应查看托管条款，并避免使用付费域名、数据库和商业插件。

第一步：确定访客要完成的动作

先写下谁会访问以及希望对方采取什么行动。家政门店可以让黄州城区居民查看保洁项目、确认营业时间并电话预约；黄冈特产店则可展示产品、标注取货地址并提供咨询电话。初版只做介绍和联系，不必急着加入会员、支付或后台管理。

• 主要访客：黄州城区居民、来黄冈游玩的访客，或本地合作机构。
• 主要动作：查看服务范围、拨打预约电话、前往门店。
• 先备好的资料：店名、服务项目、营业时间、经核实的地址、经负责人同意公开的电话。

文案写清具体服务，例如“黄州城区油烟机清洗，预约后上门”，不要只写“品质服务”。示例代码中的店名、电话和地址都要由经营者替换，不能把占位号码直接发布。

第二步：建立源码目录

新建项目文件夹，把网页结构和样式分开保存。这个单页示例不需要数据库、框架或付费建站软件：

huanggang-site/
├── index.html
├── css/
│   └── style.css
└── images/
    └── shop.jpg

index.html 是首页入口，css/style.css 控制字体、颜色和手机排版，images/shop.jpg 可存放门店实拍图。文件名使用英文小写和短横线，避免空格、中文标点及大小写混用。没有合适照片时，可以先删去图片引用，不要放未经授权的图片。

第三步：编写可直接改造的首页源码

将以下代码保存为 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="wrap">
    <p class="eyebrow">黄冈 · 黄州</p>
    <h1>黄州洁家家政</h1>
    <p>家电清洗与日常保洁，提前预约，上门服务。</p>
    <a class="button" href="#contact">查看预约方式</a>
  </header>

  <main class="wrap">
    <section id="services">
      <h2>服务项目</h2>
      <ul>
        <li>油烟机清洗：预约后确认上门时间与收费。</li>
        <li>空调清洗：服务黄州城区，具体范围电话确认。</li>
        <li>日常保洁：按房屋面积和需求预约。</li>
      </ul>
    </section>

    <section id="contact">
      <h2>门店与预约</h2>
      <p>营业时间：周一至周日 08:30—18:00（请核实后保留）</p>
      <p>门店地址：黄冈市黄州区〔替换为真实地址〕</p>
      <p>预约电话：〔替换为已获授权公开的号码〕</p>
      <a class="button" href="tel:0713XXXXXXX">拨打预约电话</a>
    </section>
  </main>

  <footer class="wrap">
    <p>黄州洁家家政 · 营业时间或服务范围变更时请及时更新。</p>
  </footer>
</body>
</html>

tel:0713XXXXXXX 只是占位写法，发布前必须替换为真实可拨打的号码，显示号码也要同步修改。若不希望公开电话，可以删除拨号链接，改为经门店确认的其他联系方法。

第四步：设置样式并优先适配手机

将下面的样式保存为 css/style.css。这份配置把正文设为 16px、主体最大宽度设为 960px，并在屏幕宽度不超过 720px 时调整留白；图片若加入，建议压缩至 300KB 左右，减少移动网络下的等待时间。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #253044;
  background: #f5f7fa;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.wrap {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
}

header {
  padding-top: 56px;
  padding-bottom: 40px;
}

.eyebrow {
  color: #356b58;
  font-weight: 700;
}

h1, h2 {
  line-height: 1.3;
}

section {
  margin: 20px 0;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
}

.button {
  display: inline-block;
  padding: 10px 16px;
  color: #fff;
  background: #176b53;
  border-radius: 8px;
  text-decoration: none;
}

footer {
  padding-top: 12px;
  padding-bottom: 32px;
  color: #596579;
}

@media (max-width: 720px) {
  header {
    padding-top: 32px;
  }

  section {
    padding: 18px;
  }
}

样式里的颜色可以按门店招牌调整，但要让正文和背景保持明显对比。导航和预约按钮应留出足够点击区域；若加入门店照片，给图片写明场景的替代文字，并确认照片由门店拍摄或已获授权。

第五步：在本地逐项检查

用浏览器打开 index.html，确认黄州门店名称、服务项目、营业时间、地址和电话都正确。把浏览器窗口缩窄到手机宽度，检查标题是否完整、按钮是否容易点击、文字是否需要横向滚动。再逐项核对：

• 首页文件名为 index.html，样式路径与目录大小写一致。
• 点击“查看预约方式”能跳到预约区域；拨号按钮指向真实号码。
• 服务范围、收费说明和营业时间由门店负责人确认，不留测试文字。
• 图片可以正常显示，文件体积适当；没有使用无授权照片或个人隐私资料。

第六步：发布静态源码并复查访问

选择支持静态文件托管且当前提供免费额度的服务，按其控制台提示创建项目并上传整个 huanggang-site 文件夹，或关联保存源码的代码仓库。若控制台要求填写构建命令，这个纯 HTML/CSS 项目通常不需要构建；发布目录应指向包含 index.html 的项目根目录。不同服务的字段名称和规则可能不同，应以所选服务的说明为准，不要照搬其他平台的设置。

发布完成后，用服务分配的测试域名分别在手机和电脑上打开，确认首页、样式和图片均能加载，导航与拨号动作也正常。若出现空白或样式丢失，先检查入口文件位置、文件名大小写和 css/style.css 相对路径。需要自定义域名、商业邮箱、数据库或更高流量额度时，先核对收费规则；免费额度、域名续费和托管条款均可能变化。

源码保存在自己的电脑，并在另一处备份；每次调整地址、营业时间或服务项目，先本地预览再重新发布。实际可长期维持零授权费的部分，是这套不依赖付费软件和数据库的静态源码；第三方托管能否一直免费，取决于服务商未来的规则。按“确认需求—编写源码—本地检查—免费额度发布—定期维护”推进，就能先搭起一张能展示服务、能联系门店、适合手机阅读的黄冈网站。