css如何绘制图表 |css li 鼠标悬停事件

.chart {
width: 500px;
height: 300px;
border: 1px solid #ddd;
position: relative;
}
.chart .axis-x {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #ddd;
}
.chart .axis-y {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: #ddd;
}
.chart .bar {
position: absolute;
bottom: 0;
width: 30px;
background-color: #369;
}

上述代码是一个简单的条形图的实现，通过CSS的position属性实现了各个元素的位置定位，其中axis-x和axis-y为坐标轴，bar为条形图的柱子。

除了条形图，大家还可以通过CSS实现折线图、饼图等各种复杂的图表，只需要充分利用CSS各种属性和选择器的组合，配合HTML和JavaScript的运用，就可以创造出各种丰富多彩的网页效果。