HTML CSS 页面布局：顶部导航、左侧信息区和右侧内容区

<!DOCTYPE html>
<html>
<head>
  <title>页面示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
<pre><code>body {
  font-family: Arial, sans-serif;
}

/* 顶部导航条样式 */
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline;
  margin-right: 10px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}

/* 左侧信息区样式 */
.sidebar {
  background-color: #f1f1f1;
  width: 200px;
  padding: 20px;
  float: left;
}

/* 右侧内容区样式 */
.content {
  padding: 20px;
  margin-left: 220px;
}
</code></pre>
  </style>
</head>
<body>
  <div class='navbar'>
    <ul>
      <li><a href='#'>首页</a></li>
      <li><a href='#'>关于我们</a></li>
      <li><a href='#'>产品</a></li>
      <li><a href='#'>联系我们</a></li>
    </ul>
  </div>
  <div class='sidebar'>
    <h2>左侧信息</h2>
    <p>这里是一些左侧信息。</p>
  </div>
  <div class='content'>
    <h1>右侧内容</h1>
    <p>这里是右侧内容。</p>
  </div>
</body>
</html>
<p>这段代码将会生成一个包含顶部导航条、左侧信息区和右侧内容区的页面。顶部导航条的背景颜色为深灰色，菜单项颜色为白色。左侧信息区的背景颜色为浅灰色，宽度为200像素。右侧内容区的距离左侧信息区的间距为20像素。</p>