Use CSS to implement basic bar chart Effects

CSS bar charts are common forms of web design. The number of bar charts can be displayed in the form of a bar chart.
What is the implementation method of CSS basic bar chart? Let's take a look at the following example: CopyCode The Code is as follows: <Div class = "Graph">
<Strong class = "bar" style = "width: 24%;"> 24% </strong>
</Div>

This is the XHTML code. It defines a container and the application class graph, which includes an XHTML element strong and applies the class bar to this element.
Let's look at the following CSS definition:Copy codeThe Code is as follows:. Graph {
Position: relative;/* IE is dumb */
Width: 200px;
Border: 1px solid # b1d632;
Padding: 2px;
}
. Graph. Bar {
Display: block;
Position: relative;
Background: # b1d632;
Text-align: center;
Color: #333;
Height: 2em;
Line-Height: 2em;
}
. Graph. Bar span {position: absolute; left: 1em ;}

Through the border and color definition above, we outline a bar chart. In the XHTML code, style = "width: 24% ;", defines the size of the configured area. This basic bar chart is complete!
We can see the final running effect:Xmlns = "http://www.w3.org/1999/xhtml">

24% 60%