我的页面上有一个宽度为 100% 的 div。现在我需要将块显示为<div>
就像 Windows 进度条一样,谁能告诉我如何在我的 div 中创建这些块?
问问题
2350 次
5 回答
2
我复制了@Anshuman Dwibhashi 的答案,但我将背景更改为您发布的一张图片。现在您只需增加或减少百分比宽度.sub-block
即可更改加载条进度。
<div class="main" style="border:solid;background-color:white;width:500px;height:25px;">
<div class="sub-block" style="background:url('http://i.imgur.com/PRBmb4s.png');width:30%;height:25px;" ></div>
</div>
于 2013-08-16T07:21:31.557 回答
1
像这样
CSS
.progress-striped .bar {
background-color: #149BDF;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress .bar {
-moz-box-sizing: border-box;
background-color: #0E90D2;
background-image: linear-gradient(to bottom, #149BDF, #0480BE);
background-repeat: repeat-x;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
color: #FFFFFF;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
transition: width 0.6s ease 0s;
width: 0;
}
.progress {
background-color: #F7F7F7;
background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
background-repeat: repeat-x;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
height: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-striped .bar {
background-color: #149BDF;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
background-color: #62C462;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
于 2013-08-16T07:20:04.623 回答
0
创建该块的图像文件并将其用作进度内部元素的背景。给背景重复-x。
例如:
background: url("Block.png") left top repeat-x transparent;
进一步阅读:
于 2013-08-16T07:19:10.647 回答
0
尝试这个:
CSS
.main {
border: solid;
background-color: white;
width: 500px;
height: 25px;
}
.sub-block {
background-color: green;
display:inline-block;
width: 20px;
height: 25px;
}
HTML
<div class="main" >
<div class="sub-block" ></div>
</div>
根据您的需要添加更多数量的子块;
于 2013-08-16T07:16:09.600 回答
-1
在您的 HTML 中
<div class="block-container">
<div class="sub-block" ></div>
<div class="sub-block" ></div>
<div class="sub-block" ></div>
.
.
.
</div>
在你的 css 文件中
.block-container
{
background-color:white;
width: 500px;
height: 25px;
}
.sub-block {
background-color: green;
width: 20px;
height: 25px;
padding-left: 3px;
}
或者
<div class='fix size'>
<div style="width:100%;">
<div>
10 sub-div 10% each
</div>
</div>
</div>
于 2013-08-16T07:32:48.897 回答