使用div+css布局

Div+CSS布局是一种网页布局的方式，通过使用HTML的<div>标签和CSS样式来实现页面的排版和布局。 下面是一个简单的例子：

HTML代码：

<div class="container">
  <div class="header">头部</div>
  <div class="content">内容</div>
  <div class="footer">底部</div>
</div>

CSS代码：

.container{
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

.header{
  height: 100px;
  background-color: #f00;
}

.content{
  height: 400px;
  background-color: #0f0;
}

.footer{
  height: 100px;
  background-color: #00f;
}

上面的代码实现了一个简单的网页布局，包括一个头部、内容和底部。其中，`.container`是最外层的容器，用来限定整个页面的宽度和样式，`.header`、`.content`和`.footer`分别是页面的头部、内容和底部，通过CSS设置它们的高度和背景颜色。`margin: 0 auto`可以将整个容器居中显示，`padding:20px`可以设置容器的内边距，让内容与边框保持一定的距离。这样，就可以通过Div+CSS布局来实现网页的排版和布局了。