CSS打造超炫进度条、柱状图

题目有点标题党了,先来个图弥补一下。

怎么样,是不是有点心动了,完全CSS+Div打造。再看一下简单而又漂亮的

是不是也还可以呢?下面看下代码是怎样的

css:

代码 1                 .graph { 
 2                     position: relative; 
 3                     width: 200px; 
 4                     border: 1px solid #B1D632; 
 5                     padding: 2px; 
 6                     margin-bottom: .5em;                    
 7                 }
 8                 .graph .bar { 
 9                     display: block;    
10                     position: relative;
11                     background: #B1D632; 
12                     text-align: center; 
13                     color: #333; 
14                     height: 2em; 
15                     line-height: 2em;                                    
16                 }
17                 .graph .bar span { position: absolute; left: 1em; }

it知识库CSS打造超炫进度条、柱状图,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。