《
CSS打造超炫进度条、柱状图》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333H2013.htm
再看一下柱状图的后果：
再看上面复杂的代码又是怎么实现的
CSS顶用到了多少个图片在示例代码下载中有。应用方式同样简单。
怎么样，是不是有点心动了，完整CSS+Div打造。再看一下简单而又美丽的
--> [
网站建设之]CSS打造超炫进度条、柱状图
我感到这个是最炫的（偷笑一个^_^）实在最重要的处所在图片上，代码就不贴了，有兴致的请下载示例代码。
CSS：
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->1 <h3>简单进度条</h3>
2 <div class="graph">
3 <strong class="bar" style="width: 54%;"><span>54%</span></strong>
4 </div>
5 <div class="graph">
6 <strong class="bar" style="width: 8%;"><span>8%</span></strong>
7 </div>
8
只有转变bar的width就能够随便改变进度条的长度，简略易用吧。
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1 <h3>庞杂进度条</h3>
2 <dl>
3 <dt>爱好博客园</dt>
4 <dd>
5 <div style="width:25%;"><strong>25%</strong></div>
6 </dd>
7 <dt>很喜欢</dt>
8 <dd>
9 <div style="width:55%;"><strong>55%</strong></div>
10 </dd>
11 <dt>超级喜欢</dt>
12 <dd>
13 <div style="width:75%;"><strong>75%</strong></div>
14 </dd>
15 </dl>
16
Tag：进度条 柱状图 进度条 柱状图
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 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 ,
CSS打造经典鼠标触发显示选项;height: 2em;
15 line-height: 2em;
16 }
17 .graph .bar span { position: absolute; left: 1em,
css我们真的走的太远了吗; }
标题有点题目党了，先来个图补充一下,CSS必须要知道的10个技巧。
是不是也还可以呢？下面看下代码是怎么的
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1 /* 复杂进度条 */
2 dl {
3 margin: 0;
4 padding: 0;
5 ,
CSS必知高级语法; }
6 dt {
7 position: ,
CSS强制TD不换行;relative;
8 clear: both;
9 display: block; ,
CSS引用方式详解;
10 float: left;
11 ,
CSS常见问题及解决办法; width: 104px;
12 ,
CSS常见问题及小技巧汇总; height: 20px;
13 line-height: 20px;
14 margin-right: 17px;
15 font-size: .75em;
16 text-align: right;
17 }
18 dd {
19 position: relative;
20 ,
CSS常见兼容性问题总结; display: block;
21 float: left;
22 width: 197px;
23 height: 20px;
24 margin: 0 0 15px;
25 background: url("g_colorbar.jpg");
26 }
27 * html dd { float: none; } /*此处为 IE hack */
28
29 dd div {
30 position: relative;
31 background: url("g_colorbar2.jpg");
32 height: 20px;
33 width: 75%;
34 text-align:right;
35 }
36 dd div strong {
37 position: absolute;
38 right: -5px;
39 top: -2px;
40 ,
CSS常用属性的代码简化实例; display: block;
41 background: url("g_marker.gif");
42 height: 24px;
43 width: 9px;
44 text-align: left;
45 text-indent: -9999px;
46 overflow: hidden;
47 }
48
HTML:
HTML：
css：
(责任编辑：网站建设)
CSS打造超炫进度条、柱状图相关文章