HTMLCSS中的进度条

概述dd { /*position: relative; /* IE is dumb */ display: block; float: left; width: 500px; height: 16px; margin: 0 0 2px; background: url("white3.gif"

dd {     /*position: relative; /* IE is dumb */    display: block;                     float: left;         wIDth: 500px;     height: 16px;     margin: 0 0 2px;     background: url("white3.gif");  } dd div.blue {     /*position: relative; */    background: url("blue.gif");     height: 16px;     wIDth: 75%;     text-align:right;     display:block; }

HTML：

<dd>    <div  > </dd>

这样就形成了一个白色条,并用35％的蓝色填充.

现在我想用两个不同的值填充SAME进度条.例如,如果值A为30％且值B为40％,则将填充70％的条,但每个的百分比可以通过颜色的差异来看出.价值A和B可以在条形图上以任何顺序排列,只要我能分辨出两种不同的东西并“看到”每个人占多少.

有什么建议？

谢谢.

解决方法 你在找这样的东西吗？

CSS：

div.dd {    /*position: relative; /* IE is dumb */    display: block;                     float: left;         wIDth: 500px;     height: 16px;     margin: 0 0 2px;     background: #fff; }div.dd div.blue {     /*position: relative; */    background: #00f;     height: 16px;     wIDth: 75%;     text-align:right;     display:block;    float: left;}div.dd div.red {     /*position: relative; */    background: #f00;     height: 16px;     wIDth: 75%;     text-align:right;     display:block;    float: left;}

HTML：

<div >    <div  ></div>    <div  ></div></div>

我不确定你为什么要使用dd标签(对我来说,这个标签会导致div在dd标签下呈现,而不是在内部).

总结

以上是内存溢出为你收集整理的HTML / CSS中的进度条全部内容，希望文章能够帮你解决HTML / CSS中的进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。