CSS bar charts are a form we often encounter in web design. A bar chart can be shown visually in the form of a bar graph.
What is the implementation of the CSS Basic bar chart? Let's look at the following examples:
Copy Code code as follows:
<div class= "graph" >
<strong class= "Bar" style= "width:24%;" >24%</strong>
</div>
This is the XHTML code, which defines a container, applies class graph, includes an XHTML element strong, and applies class bar to this element.
Let's look at the following CSS definition:
Copy Code code 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;}
With the above border, the definition of the color, we sketch out a strip shape, we style= "width:24%" in the XHTML code, and define the size of the area that is set. Such a basic bar chart is done!
We look at the final effect of the operation:
<! 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:relati ve /* 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> <div class= "graph" > <strong class= "Bar" >24%</strong> </div> <div class= "graph" > <strong class= "Bar" >60%</strong> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
