CSS bar charts are a form that we often encounter in web design. A bar chart can be used to visually represent quantities in a bar shape.
What is the way to implement CSS basic bar charts? Let's look at the following examples:
Copy CodeThe code is as follows:
24%
This is the XHTML code, which defines a container that applies the class graph, which includes an XHTML element strong, and applies the class bar to this element.
Let's look at the following CSS definitions:
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 above border, the color definition, we sketched out a strip shape, we style= "width:24%;" in the XHTML code, which defines the size of the area set. Such a basic bar chart is done!
Let's look at the final results of the operation:
<textarea id= "runcode30004" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title></title> <style type=" Text/css ">. 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;} </style> </pead> <body> <strong class= "Bar" style= "width:24%;" >24%</strong> <strong class= "bar" style= "width:60%;" >60%</strong> </body> </ptml> </textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
