使用div和CSS布局可以创建各种复杂的网页布局。下面是一些常见的CSS布局示例，演示如何使用div和CSS来创建不同类型的布局。
1. 基本网格布局
HTML代码：
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
CSS代码：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}.row {
display: flex;
justify-content: space-between;
}
.col {
flex-basis: 30%;
background-color: lightgray;
padding: 10px;
}
这个示例中，.container类设置了一个容器元素，使用flex布局，并使其内容垂直居中。.row类定义了一个行元素，使其内部的列元素水平分布，并且在列之间有间距。.col类定义了每个列元素的样式和宽度。
2. 两栏布局
HTML代码：
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
CSS代码：.container {
display: flex;
}.sidebar {
flex-basis: 25%;
background-color: lightgray;
padding: 10px;
}.content {
flex-basis: 75%;
background-color: white;
padding: 10px;
}
这个示例中，.container类使用flex布局使侧边栏和内容区域水平排列。.sidebar类定义了侧边栏的样式和宽度，.content类定义了内容区域的样式和宽度。
3. 响应式布局
HTML代码：
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS代码：
.container {
display: flex;
flex-wrap: wrap;
}.left {
flex-basis: 100%;
background-color: lightgray;
padding: 10px;
}
@media (min-width: 768px) {
.left {
flex-basis: 25%;
}
.right {
flex-basis: 75%;
background-color: white;
padding: 10px;
}
}
在这个示例中，.container类使用flex布局，并使用flex-wrap属性使元素换行。在小屏幕设备上，.left元素占据整个宽度，而在大屏幕设备上，.left和.right元素分别占据不同的宽度。
以上示例只是CSS布局的一小部分，你可以根据需求和设计灵活地使用<div>和CSS来创建更复杂和多样化的布局。通过组合使用不同的布局技术（如Flexbox、Grid、Positioning等），可以实现各种各样的网页布局效果。