港澳2025年免费资科大全 - 专区版v2.6.4

港澳2025年免费资科大全,香港全年最全免费资料大全:免费网站代码大全：从零搭建可直接运行的基础网站

来源：界面新闻2026-07-31 01:30:40

字号

超大

大

标准

小

如果你需要的是一套能够直接打开、修改和发布的免费网站代?码，最简单的方式是先使用一个自包含的 index.html 文件。下面这份代码已经包含网页结构、响应式样式、导航菜单、服务卡片、联系表单和基础交互，不依赖服务器、数据库或外部资源。

使用方法很简单：新建一个文本文件，将文件名改为 index.html，把下面的完整代码复制进去并保存为 UTF-8 编码，然后双击文件即可在浏览器中运行。后续可以根据自己的业务替换文字、颜色和模块。

可直接运行的?基础网站完整代?码

这是一页式企业、个人服务、工作室或项目介绍网站模板。表单目前只在当前页面显示提交提示，不会真正发送邮件；如果需要收集数据，还要连接后端接口或第三方表单服务。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>简洁工作室官网</title>
  <style>
    :root {
      --primary: #2563eb;
      --dark: #172033;
      --muted: #64748b;
      --light: #f8fafc;
      --border: #e2e8f0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      color: var(--dark);
      background: #ffffff;
      font-family: Arial, "Microsoft YaHei", sans-serif;
      line-height: 1.7;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(1120px, 92%);
      margin: 0 auto;
    }

    header {
      border-bottom: 1px solid var(--border);
      background: #ffffff;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 68px;
    }

    .brand {
      color: var(--primary);
      font-size: 21px;
      font-weight: bold;
    }

    .menu {
      display: flex;
      gap: 24px;
      color: var(--muted);
      font-size: 15px;
    }

    .menu a:hover {
      color: var(--primary);
    }

    .hero {
      padding: 88px 0;
      background: linear-gradient(135deg, #eff6ff, #ffffff);
    }

    .hero h1 {
      max-width: 720px;
      margin-bottom: 18px;
      font-size: clamp(32px, 6vw, 58px);
      line-height: 1.2;
    }

    .hero p {
      max-width: 650px;
      margin-bottom: 28px;
      color: var(--muted);
      font-size: 18px;
    }

    .btn {
      display: inline-block;
      padding: 11px 20px;
      border-radius: 8px;
      color: #ffffff;
      background: var(--primary);
      font-weight: bold;
    }

    .btn:hover {
      background: #1d4ed8;
    }

    section {
      padding: 70px 0;
    }

    .section-title {
      margin-bottom: 28px;
      text-align: center;
    }

    .section-title h2 {
      margin-bottom: 8px;
      font-size: 32px;
    }

    .section-title p {
      color: var(--muted);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .card {
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #ffffff;
    }

    .card h3 {
      margin-bottom: 10px;
      font-size: 20px;
    }

    .card p {
      color: var(--muted);
    }

    .about {
      background: var(--light);
    }

    .contact-box {
      max-width: 680px;
      margin: 0 auto;
    }

    label {
      display: block;
      margin: 14px 0 6px;
      font-weight: bold;
    }

    input,
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font: inherit;
    }

    textarea {
      min-height: 130px;
      resize: vertical;
    }

    button {
      margin-top: 18px;
      padding: 12px 22px;
      border: 0;
      border-radius: 8px;
      color: #ffffff;
      background: var(--primary);
      cursor: pointer;
      font: inherit;
    }

    #formMessage {
      margin-top: 12px;
      color: #15803d;
    }

    footer {
      padding: 26px 0;
      color: #cbd5e1;
      background: #172033;
      text-align: center;
    }

    @media (max-width: 700px) {
      .nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 14px 0;
      }

      .menu {
        flex-wrap: wrap;
        gap: 10px 16px;
      }

      .hero {
        padding: 58px 0;
      }

      .grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="container nav">
      <a class="brand" href="#home">简洁工作室</a>
      <nav class="menu">
        <a href="#services">服务</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系</a>
      </nav>
    </div>
  </header>

  <main id="home">
    <section class="hero">
      <div class="container">
        <h1>让每一个好想法，都拥有清晰的网站表达</h1>
        <p>这是一个适合个人、工作室和小型团队使用的基础网站模板，页面简洁、加载轻量，并能适配手机和电脑。</p>
        <a class="btn" href="#contact">开始咨询</a>
      </div>
    </section>

    <section id="services">
      <div class="container">
        <div class="section-title">
          <h2>我们可以提供什么</h2>
          <p>将这里的内容替换成你的产品或服务。</p>
        </div>
        <div class="grid">
          <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>
      </div>
    </section>

    <section id="about" class="about">
      <div class="container">
        <div class="section-title">
          <h2>关于我们</h2>
          <p>用真实经历、服务范围和项目案例替换这段文字。</p>
        </div>
        <div class="card">
          <p>我们专注于制作结构清楚、操作简单的?基础网站。无论是个人主页、产品介绍页还是小型企业官网，都可以在这个模板上继续扩展。</p>
        </div>
      </div>
    </section>

    <section id="contact">
      <div class="container contact-box">
        <div class="section-title">
          <h2>联系咨询</h2>
          <p>填写信息后，页面会给出本地?提交提示。</p>
        </div>
        <form id="contactForm">
          <label for="name">姓名</label>
          <input id="name" name="name" required placeholder="请输入姓名">

          <label for="email">邮箱</label>
          <input id="email" name="email" type="email" required placeholder="请输入邮箱">

          <label for="message">需求描述</label>
          <textarea id="message" name="message" required placeholder="请简单描述你的需求"></textarea>

          <button type="submit">提交信息</button>
          <p id="formMessage"></p>
        </form>
      </div>
    </section>
  </main>

  <footer>
    <p>? 2024 简洁工作室。请替换为你的版权信息。</p>
  </footer>

  <script>
    const form = document.querySelector("#contactForm");
    const message = document.querySelector("#formMessage");

    form.addEventListener("submit", function (event) {
      event.preventDefault();
      message.textContent = "信息已提交，感谢你的留言。";
      form.reset();
    });
  </script>
</body>
</html>

这份免费网站代码包含哪些部分

港澳2025年免费资科大全,香港全年最全免费资料大全:HTML 页面结构

header 用于放置品牌名称和导航，main 包含首页主体内容，section 分成首屏、服务、关于和联系区域，footer 用于显示版权或补充信息。这种结构比把所有文字堆在一个区域中更容易阅读，也方便后续扩展。

港澳2025年免费资科大全,香港全年最全免费资料大全:CSS 页面样式

代码中的? CSS 使用了颜色变量、网格布局、卡片样式和媒体查询。电脑端使用三列服务卡片，屏幕宽度较小时自动变为单列。你不需要修改 HTML 结构，只调整 :root 中的颜色，就能快速改变整站的主色调。

港澳2025年免费资科大全,香港全年最全免费资料大全:JavaScript 表单交互

脚本监听表单的?提交动作，阻止浏览器刷新页面，并在表单下方显示提示文字。它适合演示前端交互，但不具备真实的数据保存能力。正式网站需要把?表单?内容发送到?自己的服务器，再由服务器完成邮件通知、数据库保存或人工处理。

如何修改成自己的免费网站

基础网站常见修改位置
修改目标	代码位置	修改方法
网站名称	title、brand 和 footer	替换为个人名、公司名或项目名
首页标题	hero 区域的 h1	用一句话说明产品、服务或网站用途
服务内容	services 区域的三个 card	修改标题和描述，也可以复制卡片增加项目
主题颜色	:root 颜色变量	修改 primary、dark 和 light 的颜色值
联系方式	contact 区域的表单	根据需要增加电话、地址、微信或办公时间