Question

我正在尝试创建一些CSS，这将允许我创建自己的进度条。

HTML5功能<progress value="10" max="100"></progress>可以使用，但我想自己这样做。

我的CSS将.progressbar定义为10px宽和10px高（我应该将其重命名为.progressPiece，但这可以在以后发生。）

.progressbar>div {
  margin:0;
  padding:0;
  height:10px;
  width:10px;
}

对于我已完成的进度条的每个部分，我创建了一个定义要使用的图像的类：

.start>div {
  background: url("/images/images/pbStart.gif") right center no-repeat;
}

.startGlow>div {
  background: url("/images/images/pbStartGlow.gif") right center no-repeat;
}

.chunk>div {
  background: url("/images/images/pbChunk.gif") right center no-repeat;
}

.motion>div {
  background: url("/images/images/pbMotion.gif") right center no-repeat;
}

.end>div {
  background: url("/images/images/pbEnd.gif") right center no-repeat;
}

.endGlow>div {
  background: url("/images/images/pbEndGlow.gif") right center no-repeat;
}

通过查看示例，我认为以下代码段可行：

<div class="progressbar startGlow"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>

startGlow chunk chunk chunk end

<div class="progressbar start"></div>
<div class="progressbar motion"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>

start motion chunk chunk end

<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar motion"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>

start chunk motion chunk end

<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar motion"></div>
<div class="progressbar end"></div>

start chunk chunk motion end

<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar endGlow"></div>

start chunk chunk chunk endGlow

显然，我的文字没有产生我想要的输出。

我看到的只是不存在的框，如this jsFiddle所示。

为什么这不起作用？

更新：虽然现在已经解决了，但我正在使用此工作区使用较小的jpeg图像开发相同的进度条。

startGlow chunk chunk chunk end

start motion chunk chunk end

start chunk motion chunk end

start chunk chunk motion end

start chunk chunk chunk endGlow

Answer 1

您正在使用直接后代运算符>，但所有div都是空的。删除CSS中的每个>div。
10x10px太小，无法显示您的图像。将width的{{1}}和height增加到100px。
.progressbar是一个块级元素，因此您需要div float: left

工作小提琴：

http://jsfiddle.net/myajouri/mR2uS/2/

Answer 2

您正在使用父选择器“＆gt;”在您的CSS中，但您提供的HTML中没有父/子关系。您还使用DIV显示应该在一行显示的图像。它们需要更改为SPAN，因为DIV是块元素。

这是您正在尝试的<{p>>的工作fiddle

我没有使用背景图片，而是使用了img标签。默认的标记布局如下：

<span class="progressbar startGlow">
    <img src = "http://i.stack.imgur.com/t9NuV.gif">
</span>

多个CSS类值

2 个答案: