如何更改单个卡的背景颜色?

时间:2020-05-14 01:50:28

标签: html css

我在CSS中定义了卡片。在CSS中分配背景色会使每张卡具有相同的颜色。如何制作这两张背景颜色不同的卡?有任何内联解决方案吗?

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.card {
  padding: 16px;
  text-align: center;
  background-color: #ffff00;
}
  </div><div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
    
  

1 个答案:

答案 0 :(得分:2)

有百万种方法可以做到。这是一个(我在其中之一中添加了“ othercard”类)。

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.card {
  padding: 16px;
  text-align: center;
  background-color: #ffff00;
}

.othercard {
  background-color: #00ff00;
}
  </div><div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="column">
    <div class="card othercard">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>