[分享]css两个盒子一上一下

在网页设计中，有时候会需要将两个盒子分别放在页面的上下位置。这时候，我们可以使用CSS来实现。具体方法如下：/ 上面的盒子 / box1 { width: 400px; height: 200px; ...

在网页设计中，有时候会需要将两个盒子分别放在页面的上下位置。这时候，我们可以使用CSS来实现。具体方法如下：

/* 上面的盒子 */
#box1 {
  width: 400px;
  height: 200px;
  background-color: #f5f5f5;
}

/* 下面的盒子 */
#box2 {
  width: 400px;
  height: 200px;
  background-color: #d9d9d9;
} 

以上是CSS代码，接下来是HTML代码：

<div id="box1"></div>
<div id="box2"></div> 

我们可以看到，通过设置不同的ID来分别选中两个盒子，然后对它们设置宽高、背景颜色等属性，最终实现了上下两个盒子的效果。