官方版资源与发行标注

这套源码将结构、样式和交互分开，初学者可以逐段查看，有经验的开发者也能抽取导航、介绍卡片或窄屏布局。发行标注如下：版本号未标注，适用平台未标注，发行年份为 2026，资源类型为 HTML/CSS/JavaScript 源码，版本记录与安装包规格未提供。不要把未标注的版本或平台理解为某个具体编号或系统支持承诺。

建议按下列目录名整理文件，避免图片路径与源码互相找不到：

my-site/
├── index.html
├── style.css
├── main.js
└── assets/
    ├── portrait.jpg
    └── event-banner.jpg

编辑首页标题和介绍文字时打开 index.html；调整主色、卡片圆角和留白时修改 style.css；要改变按钮动作再查看 main.js。这样的分工让替换社团名称或活动日期时，不必在整份源码中反复搜索。

首页源码示例

将下方结构保存为 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>
</head>
<body>
  <header class="topbar">
    <strong>我的网站</strong>
    <nav aria-label="主导航">首页　介绍　联系</nav>
  </header>
  <main>
    <section class="hero">
      <p>欢迎来到我的网站</p>
      <h1>清晰展示你的主题与服务</h1>
      <button type="button" id="more">了解更多</button>
    </section>
    <section id="about" class="card">
      <h2>关于本站</h2>
      <p>在这里写下具体介绍，例如服务时间、活动安排或作品特色。</p>
    </section>
  </main>
</body>
</html>

在 style.css 中为 body 设置易读字体和浅色背景；让 topbar 横向排列；给 hero 留出充足的上下间距；为 card 添加边框、圆角和内边距。窄屏下可缩小导航间距，并让卡片宽度适应可用空间，避免文字挤成狭长一列。若要使用外部样式文件，在首页 head 区域按文件名引用 style.css。

下面是一组起步样式，可保存到 style.css，再按社团或活动的主色调整：

body {
  margin: 0;
  font-family: sans-serif;
  color: #243047;
  background: #f5f7fb;
}
.topbar {
  display: flex;
  justify-content: space-between;
  padding: 18px 6%;
  background: #ffffff;
}
.hero, .card {
  margin: 24px auto;
  padding: 28px;
  max-width: 900px;
  border-radius: 12px;
}
.hero { background: #e8f1ff; }
.card { background: #ffffff; }

保存源码与启用按钮动作

在本地建立 my-site 目录，分别创建 index.html、style.css 和 main.js，再将对应源码粘贴进去；把头像或活动横幅放入 assets/，并在需要展示图片的位置填写相对路径。保存后打开 index.html，检查站点名称、介绍卡片和窄屏排版，再逐项替换示例文字。本文没有标注安装包下载地址或文件大小，因此请把上述源码分别保存为文件，不要寻找未提供的安装器。

要让“了解更多”按钮滚动到介绍卡片，可将下列代码保存为 main.js，并在首页正文末尾引用该文件：

const moreButton = document.querySelector("#more");
const aboutSection = document.querySelector("#about");

moreButton.addEventListener("click", () => {
  aboutSection.scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
});

只制作静态介绍时，可以删去按钮和对应脚本；宣传活动时，将主标题换成活动名称，并在介绍卡片补上日期、地点、开放时段和参与办法。增加新栏目后，逐一检查标题与导航文字是否一致，避免访客找不到社团简介或报名说明。

适合制作的站点类型

• 个人作品介绍：放上姓名、作品缩略图、擅长方向和联系渠道，作为简洁的线上名片。
• 社团招新介绍：展示活动照片、每周活动时间、集合地点和新成员参与方式。
• 活动宣传站：突出活动名称、举办日期、场地地址与流程安排，方便参加者快速确认行程。
• 网页制作练习：先改标题和背景色，再调整卡片间距，借此认识 HTML、CSS 与 JavaScript 各自负责的工作。

这套 2026 官方版源码以可读、可修改为主，适合作为从空目录搭建首页的起点。先确定访客要查看的主题，再添加相应栏目；个人介绍不必放活动报名模块，招新站点则应优先写清集合时间和地点。逐步替换示例素材，就能把基础模板整理成符合自身用途的展示站。