css 页面分成4部分

CSS 是前端编程中最重要的一门技术。在开发网页时，一个网页的布局是非常重要的。通常一个网页会被分成若干部分，如页头、页尾、导航栏、主体内容等等。这篇文章将会介绍如何通过 CSS 将一个网页分成四部分。

div {
  width: 100%; /* 指定宽度 */
  display: flex;
  flex-wrap: wrap;
}

div > section {
  width: 100%;
  min-height: 200px; /* 指定最小高度 */
}

div > section:nth-child(1) {
  background-color: #f2f2f2; /* 设置背景色 */
}

div > section:nth-child(2) {
  background-color: #4d4d4d; /* 设置背景色 */
  color: #fff; /* 设置字体颜色 */
}

div > section:nth-child(3) {
  background-color: #e6e6e6; /* 设置背景色 */
}

div > section:nth-child(4) {
  background-color: #fff; /* 设置背景色 */
  border: 1px solid #d9d9d9; /* 设置边框 */
}

以上代码使用了 flex 布局来实现了将一个网页分成四部分。首先，在 div 标签中指定了 width 为 100%，这样整个 div 就会占据整个网页的宽度。然后，通过设置 display: flex 和 flex-wrap: wrap，我们将 div 中的 section 分为了四个等宽的子块，且每个子块都可以进行自适应宽度，也就是说当有较小的屏幕时，section 会自动调整宽度以充满整个大的 div。

接下来就是为每一个 section 定义样式。通过设置 section 的最小高度，我们可以确保每个 section 都至少有一定的高度，并且不会随着 div 的高度变化而变化。并且，通过设置 nth-child(1),nth-child(2),nth-child(3),nth-child(4) 来分别给每个 section 设置不同的背景色和边框颜色。此外，我们还可以设置字体颜色、文字大小、字体等样式，让页面更加美观。

在使用 CSS 进行布局时，我们需要首先理清页面的结构，然后根据结构编写相应的代码。CSS 作为一门强大的前端语言，可以帮助我们将页面完美的表达出来。