div嵌套div布局实例

好的，这是一个简单的 div 嵌套 div 的布局示例：

HTML代码：

<div class="container">
  <div class="header">
    <h1>这是标题</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <h2>侧边栏</h2>
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
      </ul>
    </div>
    <div class="main">
      <h2>主要内容</h2>
      <p>这里是主要内容的文字。</p>
    </div>
  </div>
  <div class="footer">
    <p>版权所有 &copy; 2021</p>
  </div>
</div>

CSS代码：

.container {
  width: 800px;
  margin: 0 auto;
}

.header {
  background-color: #ccc;
  padding: 20px;
}

.content {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #eee;
  padding: 20px;
}

.main {
  flex-grow: 1;
  padding: 20px;
}

.footer {
  background-color: #ccc;
  padding: 20px;
}

在这个例子中，`.container` 元素是整个页面的容器，包含了顶部的 `.header`、中间的 `.content` 和底部的 `.footer`。

`.content` 元素使用了 flex 布局，将侧边栏 `.sidebar` 和主要内容 `.main` 放在一起，侧边栏的宽度是200像素，主要内容占据剩余的空间。

这个例子只是一个简单的示例，实际的布局可能更加复杂，但是 div 嵌套 div 的原则是一样的。