当然，我可以为你提供一个简单的 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` 来固定在页面底部。你可以根据自己的需求调整这个布局。