html和css制作柱状图

可以使用以下代码来制作一个简单的柱状图：

HTML代码：

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

CSS代码：

.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 300px;
  width: 500px;
  background-color: #f5f5f5;
  padding: 20px;
}

.chart-bar {
  width: 50px;
  background-color: #4285f4;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.chart-bar:hover {
  background-color: #3367d6;
}

在这个例子中，我们使用了 `display: flex` 和 `justify-content: space-between` 来创建一个水平排列的柱状图。每个柱子都是一个 `div` 元素，并使用 `height` 属性来设置其高度。我们还使用了 `border-radius` 属性来使柱子圆角化，并添加了一个简单的鼠标悬停效果。