一、静态网页制作流程

1. 规划阶段

• 明确目标：网页用来做什么？展示信息、个人主页、产品介绍？
• 确定结构：画出页面草图，规划导航栏、内容区、页脚等板块。
• 准备素材：文字、图片、图标、字体等。

2. 编写阶段

• HTML：搭建页面骨架，定义标题、段落、列表、链接、图片等结构。
• CSS：控制外观，包括颜色、字体、间距、布局、响应式适配。
• JavaScript（可选）：添加交互，如下拉菜单、轮播图、表单验证。

3. 测试阶段

• 浏览器兼容：在 Chrome、Firefox、Edge、Safari 中检查显示效果。
• 响应式测试：用开发者工具模拟手机、平板、桌面尺寸。
• 链接与资源检查：确认所有链接可跳转、图片能加载。
• 性能优化：压缩图片、合并 CSS/JS、减少外部请求。

4. 发布阶段

• 选择托管：GitHub Pages、Netlify、Vercel、阿里云 OSS 等。
• 上传文件：将 HTML、CSS、JS、图片等按目录结构上传。
• 绑定域名（可选）：配置自定义域名并开启 HTTPS。

二、简易静态网页代码

下面是一个包含 HTML + CSS 的单文件示例，直接保存为 index.html 用浏览器打开即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的静态网页</title>
  <style>
    /* 全局重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      background: #f5f7fa;
      color: #333;
      line-height: 1.6;
    }

    /* 导航栏 */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.4rem;
    }

    nav a {
      color: #ecf0f1;
      text-decoration: none;
      margin-left: 1.2rem;
      font-size: 0.95rem;
    }

    nav a:hover {
      color: #1abc9c;
    }

    /* 主内容区 */
    main {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }

    .card {
      background: #fff;
      border-radius: 8px;
      padding: 2rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      margin-bottom: 1.5rem;
    }

    .card h2 {
      margin-bottom: 0.8rem;
      color: #2c3e50;
    }

    .card p {
      color: #555;
    }

    .btn {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.6rem 1.4rem;
      background: #1abc9c;
      color: #fff;
      border: none;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      font-size: 0.95rem;
    }

    .btn:hover {
      background: #16a085;
    }

    /* 页脚 */
    footer {
      text-align: center;
      padding: 1.5rem;
      color: #888;
      font-size: 0.85rem;
    }

    /* 响应式 */
    @media (max-width: 600px) {
      header {
        flex-direction: column;
        gap: 0.6rem;
      }
      nav a {
        margin: 0 0.6rem;
      }
    }
  </style>
</head>
<body>

  <header>
    <h1>我的静态网页</h1>
    <nav>
      <a href="#">首页</a>
      <a href="#">关于</a>
      <a href="#">联系</a>
    </nav>
  </header>

  <main>
    <div class="card">
      <h2>欢迎来到我的网页</h2>
      <p>这是一个用 HTML 和 CSS 编写的简易静态页面，包含导航栏、内容卡片和页脚，并做了基础的响应式适配。</p>
      <a href="#" class="btn">了解更多</a>
    </div>

    <div class="card">
      <h2>第二块内容</h2>
      <p>你可以继续添加更多卡片，或者把 CSS 单独抽成 style.css 文件，让结构更清晰。</p>
    </div>
  </main>

  <footer>
    &copy; 2026 我的静态网页 · 保留所有权利
  </footer>

</body>
</html>

代码说明

• HTML 部分：用 header、nav、main、footer 划分语义化结构，便于阅读和维护。
• CSS 部分：用 Flex 布局做导航栏，用卡片样式美化内容区，最后用 @media 做移动端适配。
• 可扩展点：把 <style> 里的内容移到 style.css，用 <link rel="stylesheet" href="style.css"> 引入，就是更标准的分离写法。

btw，贴一个曾经做过的家教静态网页：

学海无涯