Question

我想让以下脚本中的框具有不同的颜色。

我有这个HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> </title>
    <link rel="stylesheet" href="mycss.css"/>
</head>

<body>

     <div id="Box"> 
        <div class="Box1">
            <div class="box">
                <h2> Heading 3</h2>

            </div>
        </div>
        <div class="Box2">
            <div class="box">
                <h2>Heading 2</h2>
            </div>
        </div>
        <div class="Box3">
            <div class="box">
                <h2>Heading 3</h2>
            </div>
        </div>
    </div>
</body>

这是盒子及其形状的css：

#Box
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
}
   .Box1, .Box2, .Box3 {
     float:left;
      width:25%;
    background-color:red;
 }

 .box{
height: 250px;
background-color: red;
border:1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
 }

如何制作Box1 Box2 Box3有不同的颜色？例如分别为红色，蓝色，绿色。

Answer 1

使用此CSS代码：

.Box1 {
    background-color:red;
}
.Box2 {
    background-color:blue;
}
.Box3 {
    background-color:green;
}

Answer 2

你只需要在你的类中添加一些属性（backgroundcolor）：。box1，.box2，.box2

并删除Box类中的默认背景颜色。

注意：请尝试使用较低的字母到班级名称 见例子

#Box {
  width: 100%;
  margin: 0 auto;
  margin-top: 75px;
  height: 250px;
}
.Box1,
.Box2,
.Box3 {
  float: left;
  width: 25%;
}
.box {
  height: 250px;

  border: 1px solid #bdbdbd;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px #bdbdbd;
  -webkit-box-shadow: 0 0 10px #bdbdbd;
  box-shadow: 0 0 10px #bdbdbd;
}
.Box1 {
  background-color: red;
}
.Box2 {
  background-color: lime;
}
.Box3 {
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="mycss.css" />
</head>

<body>

  <div id="Box">
    <div class="Box1">
      <div class="box">
        <h2> Heading 3</h2>

      </div>
    </div>
    <div class="Box2">
      <div class="box">
        <h2>Heading 2</h2>
      </div>
    </div>
    <div class="Box3">
      <div class="box">
        <h2>Heading 3</h2>
      </div>
    </div>
  </div>
</body>

多个框中的不同颜色

2 个答案: