确实，使用CSS实现柱状图是一种简单而有效的方法，下面是一个基本的示例代码，展示如何使用HTML和CSS来创建一个简单的柱状图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Bar Chart</title>
<style>
.bar-chart {
display: flex;
align-items: flex-end;
height: 300px;
padding: 20px;
background-color: #f4f4f4;
}
.bar {
width: 50px;
margin: 0 10px;
background-color: #3498db;
text-align: center;
color: white;
transition: height 0.3s ease;
}
.bar:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="bar-chart">
<div class="bar" style="height: 100px;">100</div>
<div class="bar" style="height: 150px;">150</div>
<div class="bar" style="height: 200px;">200</div>
<div class="bar" style="height: 250px;">250</div>
<div class="bar" style="height: 300px;">300</div>
</div>
</body>
</html>解释：
1、HTML部分：
<div class="bar-chart">：这是包含所有柱子的容器。
<div class="bar">：每个柱子都是一个带有特定高度的div元素。
2、CSS部分：
.bar-chart：设置容器为flex布局，使柱子垂直对齐到底部。
.bar：定义柱子的基本样式，包括宽度、背景颜色、文本对齐方式等。
transition属性用于在鼠标悬停时添加动画效果。
如何自定义：
柱子的高度：通过修改style="height: ..."的值来调整柱子的高度。
柱子的颜色：修改background-color属性来改变柱子的颜色。
柱子的宽度：修改width属性来调整柱子的宽度。
间距：修改margin属性来调整柱子之间的间距。
这种方法非常适合简单的静态图表，如果需要更复杂的交互或动态数据，可以考虑使用JavaScript库如D3.js或Chart.js。