请实现一个网页顶部区域居中显示四个小方块颜色分别是 RED BLUE YELLOW GREEN 方块大小为20px请在每一个方块后面增加颜色的描述文字

日期: 2025-01-16

标签: 教育

<!DOCTYPE html>
<html>
  <head>
    <title>Colorful Squares</title>
    <style>
      #container {
        text-align: center;
      }
      .square {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 10px;
      }
      #red {
        background-color: red;
      }
      #blue {
        background-color: blue;
      }
      #yellow {
        background-color: yellow;
      }
      #green {
        background-color: green;
      }
      .color-name {
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="red" class="square"></div>
      <span class="color-name">Red</span>
      <div id="blue" class="square"></div>
      <span class="color-name">Blue</span>
      <div id="yellow" class="square"></div>
      <span class="color-name">Yellow</span>
      <div id="green" class="square"></div>
      <span class="color-name">Green</span>
    </div>
  </body>
</html

请实现一个网页顶部区域居中显示四个小方块颜色分别是 RED BLUE YELLOW GREEN 方块大小为20px请在每一个方块后面增加颜色的描述文字

原文地址: https://www.cveoy.top/t/topic/gsGw 著作权归作者所有。请勿转载和采集!