[分享]css做两个框的代码

CSS是网页设计中必不可少的一部分，可以让我们的网页变得更加美观和互动。下面分享一下如何用CSS实现两个框的代码。 .box1 { width: 200px; height: 100px; backg...

CSS是网页设计中必不可少的一部分，可以让我们的网页变得更加美观和互动。下面分享一下如何用CSS实现两个框的代码。

 .box1 {
    width: 200px;
    height: 100px;
    background-color: #eee;
    float: left;
  }
  .box2 {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    float: right;
  } 

上面这段CSS代码实现了两个宽为200px、高为100px的框，一个在左侧，一个在右侧。box1的背景颜色为#eee，box2的背景颜色为#ccc。这里用到了float布局，使得两个框可以水平并排排列。

下面是HTML的代码：

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

使用标签将两个框包裹起来，并为其添加相应的CSS样式，即可实现两个框的效果。

除此之外，我们还可以通过CSS设置圆角、边框等等美化效果，让两个框看起来更加美观。