進度條在HTML/CSS

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：進度條在HTML/CSS

<dd> 
    <div class="blue" style="width:35%;"> 
</dd>

這將創建一個白色的酒吧和帶藍色的35％填充它。

現在我想用兩個不同的值填充相同的進度條。例如，如果數值A爲30％，數值B爲40％，則條紋的70％會被填充，但每種顏色的百分比可以通過顏色的差異來看。價值A和B可以以任何順序出現在酒吧上，只要我可以告訴他們有兩種不同的東西，並且「看到」每個人都有多少。

有什麼建議嗎？

謝謝。

來源

2009-02-25 T.T.T.

你在找這樣的事嗎？

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標籤下方，而不是內部）。

來源

2009-02-25 22:32:47 jennyfofenny

是的。謝謝。這是一個非常乾淨的方式來做到這一點。 – 2009-02-25 23:06:23

我建議在其上層疊另一個欄並根據需要左右移動它。

如果酒吧不應該延長視口的長度，你可以把它們放在一個溢出的div：隱藏，以保持幻想完好無損。

編輯：

我想通了，爲什麼我想這樣做的，而不是跟着你會開始的。當我以前做過類似的事情時，它使用的是圖像，在這種情況下，改變寬度會改變重疊的圖像。

只有普通的顏色，我敢肯定，只要使用尺寸就可以脫身。但是我仍然會使用CSS來疊加一層。

來源

2009-02-25 21:57:48

例子？這些值每隔幾分鐘就會改變一次，所以當第一個值降低到5％時，將第二個值移到右側將不起作用。我需要值B來「追加」。 – 2009-02-25 22:11:30

-1

<div style="height: 5px; background-color: green; width: 100%;"> 
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div> 
</div>

而在這之後：

$('#progress_bar').css('width', '30%');

來源

2013-01-18 16:27:30 Dalibor

<div class="progressbar"> 
    <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div> 
    <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div> 
</div>

然後CSS：

.progressbar { 
    background-color: #1e1e1e; 
    color: white; 
    height: 25px; 
    width: 115px; 
} 
.inner1, .inner2 { 
    height: 100%; 
    /* Change width with javascript */ 
}

如果你只是想在進度條中的一個值，有一個教程here。

來源

2016-11-12 17:16:00 IamGuest

進度條在HTML/CSS

回答

相關問題