在网页设计中，经常要用到各种形式的统计图表，在这些图表中，柱状图是一种比较常见的图表类型。实现柱状图的方式有很多种，本文将介绍一种用 CSS 制作柱状图的方法。

首先，我们需要先准备好 HTML 结构：

<div class="chart">
<div class="bar" style="height: 80%;"></div>
<div class="bar" style="height: 60%;"></div>
<div class="bar" style="height: 40%;"></div>
<div class="bar" style="height: 20%;"></div>
</div>

上面的代码中，我们使用了一个外层的 div 容器来包裹柱状图的所有子元素。每个子元素都是一个 div，它们的高度分别代表柱状图的数据。其中，class 属性为 "bar" 的 div 代表柱子，它们的高度使用 style 属性来设置，可以根据需求设置。

接下来，我们就可以用 CSS 来为这些元素添加样式了：

.chart {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
}
.bar {
width: 50px;
margin: 0 10px;
background-color: #5cb85c;
}

上面的代码中，我们为外层容器 .chart 设置了一些属性，让子元素能够进行 flex 布局，垂直方向对齐方式为底部对齐，高度为 300px。对于每个柱子 .bar，我们设置了宽度、外边距和背景颜色等属性，这样就形成了一个简单的柱状图。

需要注意的是，上面的代码只是一个简单的例子，实际使用中，我们可能需要为柱子设置一些更复杂的样式，比如阴影、圆角等效果。此外，如果柱子比较多，可能需要使用循环或者 JavaScript 等方法来生成代码，以提高效率。

综上所述，使用 CSS 制作柱状图是一种比较简单且常用的方法，它的优点是灵活、易于控制和维护。但是，需要注意的是，柱状图的样式设置需要谨慎，以确保视觉效果达到预期。