网络编程
位置：首页>> 网络编程>> 网页设计>> 利用CSS属性实现进度条的方式

利用CSS属性实现进度条的方式

作者：林小志　来源：林小志blog　发布时间：2010-02-25 12:31:00　

标签：进度条,css,样式

今天在一个QQ群中看到有人在问一个进度条的实现方式，当时因为工作时间，需求相对也比较紧，只是简单的说了一下可以通过CSS的边框属性和背景属性来完成。不过或许是因为当时说的内容比较少吧，那位朋友似乎没有明白我想要表达的意思。也罢，快过年了，晚上回来的时间相对也可以早点，抽点时间简单写一个demo，顺便再说说自己的一个思路想法吧。


在这里先祝大家虎年吉祥！

对于简单的、纯色的进度条，我一直比较热衷于直接用CSS来实现，复杂点的当然是涉及到图片啦。那么对于简单的、纯色的进度条需要怎么利用CSS的边框属性和背景属性来完成呢？

其实这个实现方式并不是很困难，考虑这个进度条的实现呢，我的思路主要是这样的：

  1. 进度条的长度改变肯定是通过JS或者其他程序语言来控制，而xhtml仅仅只页面表现

  2. 既然是通过JS或者其他程序语言控制进度条的长度，那么就可以直接利用xhtml的style属性来改变进度条的长度

  3. 通过xhtml的style属性来完成进度条的长度改变，那么也就可以改变边框的长度

  4. 那么宽度可以改变，就可以利用背景色来完成进度条的长度；边框可以改变的话，就可以利用边框色来实现进度条长度的改变

有了这样的一个思路之后，那么就需要开始实践，只有实践后才会晓得一个思路、一个想法是否能最终得到你所想要的内容。


<div class="loadbar_01"> <span style="width:80％;">8.0</span> </div>  

这个结构是我相对比较喜欢的一个结构，通过这个结构只需要改变span标签中的width属性就可以利用背景颜色来实现进度条的实现。


div.loadbar_01 {width:200px;height:20px;overflow:hidden;background-color:#EEEEEE;} 
div.loadbar_01 span {float:left;height:20px;text-indent:8px;font:normal 10px/20px Arial, Verdana,Lucida, Helvetica, sans-serif;color:#FFFBCE;background-color:#59A9F2;} 

然后我们再看一个通过边框属性来实现进度条的方式，这个方法如果有两层背景色就需要多嵌套一个div，相对而言不是非常喜欢，而如果仅仅只有一个进度条的前景色（也就是只有一种颜色的时候）我还是比较喜欢的。

<div class="loadbar_02"> <div style="border-left-width:60px;"> <span>3.0</span> </div> </div>

这样多嵌套了一层div标签后，然后再通过JS来完成第二个div标签的边框宽度值的改变，那么就可以得到最终我们所想要的进度条效果。

div.loadbar_02 {position:relative;width:200px;overflow:hidden;} 
div.loadbar_02 div {height:20px;color:#FFFBCE;border-left:1px solid #59A9F2;background-color:#EEEEEE;} 
div.loadbar_02 span {position:absolute;top:0;left:8px;height:20px;font:normal 10px/20px Arial, Verdana,Lucida, Helvetica, sans-serif;}

其中我们会在demo中看到进度条上面是有文字的，这个其实并不是重点，因为处理这个文字我们可以用定位、浮动等属性来实现。具体的大家可以仔细看一下demo，也可以通过firebug来改变相应的属性值，观察进度条的变化。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com