console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Antd collapse</title>
  </head>
  <body>
    <div class="container">
      <div class="collapse">
        <div class="collapse-item">
          <div class="collapse-header">
            &bigtriangledown; This is panel header 1
          </div>
          <div class="collapse-body">
            <p>
              A dog is a type of domesticated animal. Known for its loyalty and
              faithfulness, it can be found as a welcome guest in many
              households across the world.
            </p>
          </div>
        </div>
        <div class="collapse-item">
          <div class="collapse-header">
            &bigtriangleup; This is panel header 2
          </div>
        </div>
        <div class="collapse-item">
          <div class="collapse-header">
            &bigtriangleup; This is panel header 3
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 50px;
}

.collapse {
    max-width: 600px;
    margin: 0 auto;
}

.collapse-item {
    color: rgb(0, 0, 0);
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.collapse-header {
    background-color: #ececec;
    padding: 15px 25px;
}

.collapse-body {
    padding: 15px 25px;
    color: rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}