CSS教程-最基本的条状图表

CSS魔法，创建独特的条形图

====================

你是否想过用纯CSS创建出迷人的条形图？无需复杂的JavaScript或图像，只需简单的CSS样式即可实现。今天，我们将一起如何使用CSS构建条形图。

让我们从最基本的条形图开始。创建一个DIV容器，为其添加名为“graph”的样式类。在这个容器内，我们使用一个strong标签来作为条形图的容器，同时设置其宽度为84%。这个宽度可以根据你的需求进行调整。代码如下：

HTML代码：

`

接下来，我们在CSS中定义“.graph”类的样式。我们设置边框、宽度、内边距等属性，以定义条形图的外观。边框颜色和宽度可以根据你的页面风格进行调整。我们设置容器的宽度为200px。

CSS代码：

`.graph {

position: relative; / 为了兼容IE浏览器 /

width: 200px;

border: 1px solid B1D632; / 设置边框颜色和宽度 /

padding: 2px; / 设置内边距 /

}`

然后，我们定义“.bar”类的样式，这个类将定义条形图的实际样式。我们设置背景颜色、文字颜色、高度和对齐方式等属性。背景颜色就是条形图的颜色，可以根据你的需求进行调整。我们设置高度和行高以确保条形图有适当的尺寸和间距。

CSS代码：

`.graph .bar {

display: block; / 将strong标签转换为块级元素 /

position: relative; / 相对定位 /

background: B1D632; / 设置背景颜色 /

text-align: center; / 文字居中对齐 /

color: 333; / 文字颜色 /

height: 2em; / 高度设置为两倍的字体大小 /

line-height: 2em; / 行高设置为两倍的字体大小 /

}`