想要天天向上，就要懂得享受学习。图老师为大家推荐三种CSS图表代码，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！
【 tulaoshi.com - Web开发 】
这是最基本的预览，下面是几种不同的应用代码
一、基本的CSS图表
CSS代码
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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
二、复杂的CSS条形图
CSS代码
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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: relative;
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
dtLove Life/dt
dd
div style="width:25%;"strong25%/strong/div
/dd
dtEducation/dt
dd
div style="width:55%;"strong55%/strong/div
/dd
dtWar Craft 3 Rank/dt
dd
div style="width:75%;"strong75%/strong/div
/dd
/dl
三、CSS竖条图
CSS代码
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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
来源:https://www.tulaoshi.com/n/20160219/1606584.html
