用HTML搭建一个私人游戏库，其实比想象中简单。不需要服务器，不需要框架，一个文件就能搞定。今天我们就从零开始，手把手写一个网页游戏大全，包含主页、游戏列表和几个可玩的小游戏。

## 1. 整体思路

我们把所有内容放在一个 `index.html` 文件里。页面分三个区域：
- 顶部导航：游戏库标题
- 左侧菜单：游戏列表
- 右侧主区域：游戏运行区

点击左侧不同游戏，右侧就加载对应的游戏界面。我们用纯 CSS 控制显示隐藏，JavaScript 负责游戏逻辑。

## 2. 搭建页面骨架

新建一个 HTML 文件，复制下面代码：

```html

```

`showGame` 函数用来切换游戏面板。初始时只显示第一个游戏。

## 3. 编写基础CSS

给页面加点样式，让它看起来像个正经的游戏库：

```css
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #1a1a2e;
color: #eee;
}
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
header { text-align: center; margin-bottom: 20px; }
header h1 { font-size: 2em; color: #e94560; }
.layout { display: flex; gap: 20px; }
.game-list {
width: 180px;
display: flex;
flex-direction: column;
gap: 10px;
}
.game-list button {
padding: 12px;
font-size: 16px;
border: none;
border-radius: 8px;
background: #16213e;
color: #eee;
cursor: pointer;
transition: background 0.3s;
}
.game-list button:hover { background: #e94560; }
.game-area {
flex: 1;
background: #16213e;
border-radius: 12px;
padding: 20px;
min-height: 500px;
position: relative;
}
.game-panel { display: none; }
.game-panel.active { display: block; }
```

重点就是 `.game-panel` 默认隐藏，加上 `.active` 时显示。

## 4. 实现切换逻辑

在 HTML 底部加一段 `