Some basic CSS code for constructing a chart in a Web page

This is the most basic preview, and here are a few different application codes

A basic CSS Diagram

CSS Code

<style>
. 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>
<div class= "graph" >
<strong class= "Bar" style= "width:24%;" >24%</strong>
</div>

Second, the complex CSS bar chart

CSS Code

<style>
DL {
margin:0;
padding:0;
}
DT {
position:relative/* IE is dumb */
Clear:both;
Display:block;
Float:left;
Width:104px;
height:20px;
line-height:20px;
Margin-right:17px;
Font-size:. 75em;
Text-align:rightright;
}
DD {
position:relative/* IE is dumb */
Display:block;
Float:left;
Width:197px;
height:20px;
margin:0 0 15px;
Background:url ("g_colorbar.jpg");
}
* HTML dd {float:none;}
/* IE is dumb; Quick IE hack, apply favorite filter methods for
Wider browser compatibility/

DD Div {
Position:rel ative;
Background:url ("g_colorbar2.jpg");
height:20px;
width:75%;
Text-align:rightright;
}
DD Div strong {
Position:absolute;
Rightright: -5px;
Top: -2px;
Display:block;
Background:url ("G_marker.gif");
Height:24px;
Width: 9px;
Text-align:left;
Text-indent: -9999px;
Overflow:hidden;
}
</style>
<dl>
<dt>love life</dt>
<dd>
<div style= width:2 5%; " ><strong>25%</strong></div>
</dd>
<dt>Education</dt>
<dd >
<div style= "width:55%;" ><strong>55%</strong></div>
</dd>
<dt>war Craft 3 rank</dt>
< dd>
<div style= "width:75%;" ><strong>75%</strong></div>
</dd>
</dl>

Third, CSS vertical bar chart

CSS Code

<style>
#vertgraph {
width:378px;
Height:207px;
Position:relative;
Background:url ("G_backbar.gif") no-repeat;
}
#vertgraph ul {
width:378px;
Height:207px;
margin:0;
padding:0;
}
#vertgraph ul li {
Position:absolute;
width:28px;
height:160px;
Bottombottom:34px;
padding:0!important;
margin:0!important;
Background:url ("g_colorbar3.jpg") no-repeat!important;
Text-align:center;
Font-weight:bold;
Color:white;
Line-height:2.5em;
}

#vertgraph li.critical {left:24px; background-position:0px!important;}
#vertgraph Li.high {left:101px; background-position: -28px!important;}
#vertgraph li.medium {left:176px; background-position: -56px!important;}
#vertgraph li.low {left:251px; background-position: -84px!important;}
#vertgraph li.info {left:327px background-position: -112px!importanT
</style>
<div id= "Vertgraph" >
<ul>
<li class= "critical" style= "height:150px;" >22</li>
<li class= "High" style= "height:80px;" >7</li>
<li class= "Medium" style= "height:50px;" >3</li>
<li class= "Low" style= "height:90px;" >8</li>
<li class= "info" style= "height:40px;" >2</li>
</ul>
</div>