HTML/CSS中的进度条

Question

 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 class="blue" style="width:35%;"> 
</dd>

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

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

有什么建议？

谢谢.

Answer 1

你在找这样的东西吗？

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 class="dd">
    <div class="blue" style="width:35%;"></div>
    <div class="red" style="width:10%;"></div>
</div>

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