简单美观的 HTML 模板：左侧导航，右侧内容切换

以下是一个简单美观的 HTML 模板，它包含左右两个区域，左侧区域是一个导航列表，点击左侧导航的项目可以在右侧区域加载对应的子页面，而无需跳转到新的页面。子页面的文件名采用类似 '1.html', '2.html', '3.html' 的格式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网站</title>
    <style>
      /* 样式表 */
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }
      #nav {
        width: 200px;
        height: 100vh;
        background-color: #eee;
        float: left;
      }
      #nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      #nav li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
      }
      #nav li:hover {
        background-color: #ddd;
      }
      #content {
        margin-left: 200px;
        padding: 20px;
      }
      h1 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <!-- 导航 -->
    <div id="nav">
      <ul>
        <li onclick="loadPage(1)">页面 1</li>
        <li onclick="loadPage(2)">页面 2</li>
        <li onclick="loadPage(3)">页面 3</li>
      </ul>
    </div>
    <!-- 内容 -->
    <div id="content">
      <h1>欢迎来到我的网站！</h1>
      <p>点击导航中的页面来加载它。</p>
    </div>
    <script>
      // 加载子页面
      function loadPage(page) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("content").innerHTML = this.responseText;
          }
        };
        xhttp.open("GET", page + ".html", true);
        xhttp.send();
      }
    </script>
  </body>
</html>

在这个模板中，左侧区域使用了一个 id 为 'nav' 的 div，其中包含了一个无序列表

作为导航。每个列表项
• 都被赋予了一个 onclick 事件，当用户点击它时，会调用 loadPage 函数加载对应的子页面。

  右侧区域使用了一个 id 为 'content' 的 div，初始显示欢迎页面。loadPage 函数使用 XMLHttpRequest 对象加载子页面，然后将其内容插入到 'content' div 中。

  要使用此模板，只需将它保存为一个 HTML 文件，然后创建与导航项对应的子页面文件（例如 '1.html', '2.html', '3.html'），并将它们放在同一个目录下即可。