当然，我可以为你提供一个简单的 CSS div 布局实例。在这个例子中，我们将创建一个简单的页面布局，其中包括一个头部（header），一个主体（main），一个侧边栏（sidebar）和一个页脚（footer）。

HTML 结构如下：

```html

```

接下来是 CSS 样式：

```css

body {

display: flex; /* 使用 Flexbox 布局 */

flex-direction: column; /* 子元素垂直排列 */

height: 100vh; /* 使得 body 高度占满整个视口高度 */

margin: 0; /* 移除默认边距 */

}

.header {

background-color: #333; /* 背景颜色为深灰色 */

color: white; /* 文字颜色为白色 */

padding: 20px; /* 内边距 */

}

.main {

flex-grow: 1; /* 让主体占据剩余空间 */

background-color: #f5f5f5; /* 背景颜色为浅灰色 */

padding: 20px; /* 内边距 */

}

.sidebar {

width: 200px; /* 侧边栏宽度 */

background-color: #e6e6e6; /* 背景颜色为亮灰色 */

padding: 20px; /* 内边距 */

}

.footer {

background-color: #333; /* 背景颜色为深灰色 */

color: white; /* 文字颜色为白色 */

padding: 20px; /* 内边距 */

position: fixed; /* 页脚固定在页面底部 */

bottom: 0; /* 页脚距离底部为 0 */

}

```

在这个例子中，我们使用了 Flexbox 布局来实现 div 的布局。`flex-grow` 属性用于使主体部分占据剩余空间，而侧边栏则通过指定宽度来固定其位置。页脚则通过 `position: fixed` 和 `bottom: 0` 来固定在页面底部。你可以根据自己的需求调整这个布局。