如何仅用HTML实现页面左侧垂直内容栏（含指定导航链接）

嘿，我来帮你搞定这个左侧垂直导航栏的需求！既然你优先想要纯HTML的解决方案，那我先给你最贴合要求的实现方式，再补充个更现代的备选方案（只加一点点CSS，体验会更好）。

纯HTML方案（使用Frameset） #

这是完全不需要CSS的纯HTML实现方式，通过<frameset>把页面拆分成左右两个区域，左侧作为你的导航栏：

首先创建主页面（比如index.html）：

<!DOCTYPE html>
<frameset cols="200,*">
  <!-- 左侧侧边栏，宽度固定200px -->
  <frame src="sidebar.html" name="sidebar" noresize>
  <!-- 右侧主内容区，占剩余宽度 -->
  <frame src="game.html" name="main">
</frameset>

然后创建侧边栏页面（sidebar.html），放入你的链接：

<!DOCTYPE html>
<html>
<body>
  <a href="http://windoge8.ga" target="main">- About Windoge 8 os</a>
</body>
</html>

说明 #

• cols="200,*" 表示左侧栏宽度200px，右侧占满剩余空间
• target="main" 让点击链接后在右侧主框架打开内容
• noresize 禁止用户拖动调整栏宽（如果需要允许拖动可以去掉这个属性）

不过要注意：<frameset>属于比较旧的HTML特性，现在已经不推荐用于现代网页开发（比如不支持HTML5语义化标签、响应式布局受限），所以如果可以接受添加少量CSS的话，下面的方案会更合适。

现代HTML+CSS方案（推荐） #

这个方案只需要几行CSS，就能实现更灵活、符合现代标准的左侧垂直栏，还能轻松调整样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 用flex布局实现左右分栏 */
    .page-container {
      display: flex;
      min-height: 100vh; /* 让容器占满整个视口高度 */
    }
    .sidebar {
      width: 200px;
      padding: 15px;
      background-color: #f5f5f5; /* 可选：给侧边栏加背景色区分 */
      border-right: 1px solid #ddd; /* 可选：加个分隔线 */
    }
    .game-content {
      flex: 1; /* 占满剩余空间 */
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <div class="sidebar">
      <a href="http://windoge8.ga">- About Windoge 8 os</a>
    </div>
    <div class="game-content">
      <!-- 你的在线游戏内容放在这里 -->
    </div>
  </div>
</body>
</html>

优势 #

• 支持响应式布局（比如小屏幕下可以改成垂直堆叠，只需要加几行媒体查询）
• 可以轻松自定义侧边栏的样式（颜色、间距、边框等）
• 符合HTML5语义化标准，兼容性更好

内容的提问来源于stack exchange，提问作者Will McCrudden