计算机协会网站 - 实验 1 (骨架代码)

欢迎，未来的 Web 工程师们！本项目旨在帮助拥有 C/C++ 背景的你，顺利过渡到 Web 开发领域。

1. 概念连连看 (C++ vs. Web)

概念	C/C++ 等价物	Web (JS/DOM)
结构体/类	struct Member { ... }	JSON 对象 { "name": "..." }
指针	int* ptr = &x;	document.getElementById('id')
内存分配	new Node() / malloc	document.createElement('div')
链表	node->next = newNode	parent.appendChild(child)
文件 I/O	fopen() / fread()	fetch('data.json')

2. 重要：如何运行本项目

你可能会忍不住直接在浏览器里双击打开 index.html 文件。请不要这样做！ 这样做项目将无法正常工作。

问题所在：CORS (跨源资源共享)

在 C++ 中，你的程序可以读取你硬盘上的任何文件 (例如 /home/user/data.txt)。 但浏览器不同。出于安全考虑，一个网页不能通过 JavaScript (fetch) 来读取你本地硬盘上的文件 (通过 file:// 协议访问时)。这会阻止我们加载 members.json 的尝试。

解决方案： 我们必须模拟一个真实的 HTTP Web 服务器。

工具：VS Code 的 "Live Server" 插件

1. 打开 VS Code。
2. 前往“扩展”面板 (Ctrl+Shift+X)。
3. 搜索 "Live Server" (作者: Ritwick Dey) 并安装它。
4. 在编辑器中打开 index.html 文件。
5. 点击 VS Code 右下角的 "Go Live" 按钮。
   • 或者，在 HTML 代码中右键，选择 "Open with Live Server"。

这会启动一个本地服务器 (通常地址是 http://127.0.0.1:5500)。现在，你的浏览器会把你的电脑当作一个 Web 服务器，fetch 也就能够正常工作了！

3. 你的任务

在代码库中搜索 TODO 来找到你需要完成的作业。

任务 1: CSS 悬停效果 (css/style.css)

找到 TODO: STUDENT TASK 部分。你需要实现一条 CSS 规则，当用户的鼠标悬停在 .member-card 上时，卡片会轻微上移并改变其阴影。 提示: 查找 transform: translateY() 和 :hover 的用法。

任务 2: 渲染循环 (js/main.js)

找到 TODO: STUDENT TASK [Lab 1.2]。 我们已经把 members 变量（一个对象数组）中的数据提供给你了。你需要：

1. 循环遍历该数组。
2. 为每个成员创建一个 <div> 元素。
3. 将 HTML (图片、名字、简介) 注入到这个 <div> 中。
4. 将它追加到父容器中。

---

祝你顺利，加油，HUSTer!