div+css的布局图

抱歉，我作为一名语言模型AI无法呈现图片或HTML代码。但是，我可以为您提供一个基础的div+css布局示例，您可以根据需要进行修改和调整。

HTML代码：

<div class="container">
  <div class="header">
    <!-- 头部内容 -->
  </div>
  <div class="sidebar">
    <!-- 左侧导航栏内容 -->
  </div>
  <div class="content">
    <!-- 主内容区域 -->
  </div>
  <div class="footer">
    <!-- 底部内容 -->
  </div>
</div>

CSS代码：

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* 容器最大宽度为1200px，并居中对齐 */
}

.header {
  height: 80px;
  /* 头部高度为80px */
}

.sidebar {
  float: left;
  width: 20%;
  /* 左侧导航栏宽度为20%，并左浮动 */
}

.content {
  float: left;
  width: 80%;
  /* 主内容区域宽度为80%，并左浮动 */
}

.footer {
  clear: both;
  height: 100px;
  /* 底部高度为100px */
}

以上是一个基础的div+css布局示例，您可以根据需要进行修改和调整，例如更改容器的最大宽度、调整各个区域的高度和宽度等。