html +css 柱状成绩图

以下是一个使用HTML和CSS创建柱状成绩图的示例：

HTML：

<div class="chart">
  <div class="bar" style="height: 80%;"></div>
  <div class="bar" style="height: 60%;"></div>
  <div class="bar" style="height: 90%;"></div>
  <div class="bar" style="height: 70%;"></div>
  <div class="bar" style="height: 50%;"></div>
</div>

CSS：

.chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 80%;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.bar {
  width: 20%;
  background-color: #0077cc;
  transition: height 0.5s ease;
}

.bar:hover {
  background-color: #005ca9;
}

@media (max-width: 768px) {
  .chart {
    flex-wrap: wrap;
    height: auto;
  }
  
  .bar {
    width: 40%;
    margin-bottom: 20px;
  }
}

在这个例子中，我们使用了一个 `div` 元素作为整个柱状成绩图的容器，并在其中放置了多个 `div` 元素作为每个柱形的容器。`bar` 类分别代表每个柱形，使用 `height` 属性设置每个柱形的高度，使用 `background-color` 属性设置每个柱形的颜色。

我们使用 `display: flex` 属性和 `justify-content: space-between` 属性来使每个柱形之间的间距相等，并使用 `align-items: flex-end` 属性来将所有柱形底部对齐。使用 `width` 和 `height` 属性设置整个柱状成绩图的宽度和高度，并使用 `border` 属性和 `padding` 属性添加边框和内边距。

在移动设备上，我们使用 `@media` 查询和 `flex-wrap` 属性将柱状成绩图调整为适合移动设备的样式。

希望这个示例对您有所帮助！