如何在html和css中为特定区域设置背景颜色？

Question

之前 Before 我倾向于的是中间的黄线 Which i'm tending to is the yellow line in the middle

我使用

<hr>

作为2个网格部分中间的线，但颜色不好，所以我试图使它们具有相同的颜色。虽然我使用

<hr>

作为一条线，但您可以使用边框方法。
这是代码：

.lastpart {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  background-color: rgb(236, 236, 236);
  padding: 10px;
  margin: 10px 10px 10px 10px;
}
.grid-item-cer {
  /* background-color: rgba(255, 255, 255, 0.886);
  border: 1px solid rgba(0, 0, 0, 0.8); */
  padding: 20px;
  font-size: 30px;

}

.certify{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: lighter;
  font-size: 20px;
  
  
  padding-bottom: 40px;
}
.spec{
  border-right: 1px solid #d6c08d;
  display: flex;
  /* align-items: center;
  justify-content: center; */
}
.s{

      object-fit: cover;
      object-position: center;
      border: 0;
}
.giaikk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  float: right;
  padding-left: 20px;
  
}
.provekk{
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family:'Courier New', Courier, monospace;
  background-color: red;
  padding-top:30px;

  
}
.blank{
  margin-right: 20px;
}
.spec2{

  display: flex;
  /* align-items: center;
  justify-content: center; */
  margin-top: 60px;
}
.s2{
  border: 1px solid black;
}


.spec3{

  display: flex;
  /* align-items: center;
  justify-content: center; */
}
.blank2{
  margin-top: 10px;
}
.line{
  width: 80%;
  margin: 0 auto;
}

<body>
<div class="lastpart">
  
  <div class="grid-item-cer">
    <h3 class="certify">Chứng Chỉ - Giải Thưởng</h3>
    <div class="spec">
    <img src="s.jpg" class="s"
    width="150px"
    height="200px"
    >
    <div class="blank">
    <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
      <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
    </div>
      </h5>
    </div>
 

  </div>
  <div class="grid-item-cer ">
    <div class="spec2">
      <img src="image.png" class="s"
      width="150px"
      height="200px"
      >
      <h5 class="giaikk">ĐẠT HUY CHƯƠNG BẠC TOÁN CẤP TỈNH VIOEDU
        <p class="provekk">-Huy chương bạc cấp tỉnh toán cuộc thi toán qua mạng VIOEDU</p>
        </h5>
      </div>
   

  </div>


</div>

<hr class="line">

<div class="lastpart">
  <div class="grid-item-cer">
    <div class="spec3">
      <img src="2024_2_2_1305289694file01.jpg" class="s3"
      width="150px"
      height="200px"
      >
      <div class="blank2">
      <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
        <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
      </div>
        </h5>
      </div>
      
      </div>

  </div>
</div>
</body>

我希望这 2 个网格部分之间的空白统一，或者至少其背景颜色更改为与 2 个网格部分相同

Answer 1

如果我正确理解了该任务，那么最简单的事情就是在 CSS 代码的开头添加：

* {
  background-color: rgb(236, 236, 236);
}

如何在html和css中为特定区域设置背景颜色？

问题描述投票：0回答：1

1个回答

最新问题

如何在html和css中为特定区域设置背景颜色？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1