Question

我正在努力实现类似于GsmArena网站上的颜色评级栏。我尝试使用如下所示的div。

<div style="background-color: yellow;width: 150px;">
        <div style="background-color: red;width: 40%; height: 15px;">
        </div>
</div>

还有其他更好的方法来设计评级栏吗？任何帮助表示赞赏。提前谢谢。

编辑：

Rating bar in Gsmarena 如何将内部div正好放在外部div的中心，如图所示（取自gsmarena）？

Answer 1

我会说你拥有的东西已经足够了。 JQuery UI progress bar做了类似的事情：

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 37%;"></div>
</div>

enter image description here

编辑：如果你想要他们在gsmarena所拥有的'确切'，那么这里就是模仿他们所做的事情的css（按照@ Pelshoff的建议拆分css）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
        .graph {background-color: #d0c0c1; width: 150px; height:11px; padding:1px}
        .graph>div {width: 100%; height:100%; border-width: 1px 0 0 1px; border-style: solid; border-color: #eedfdc #d0c0c1 #d0c0c1 #eedfdc;}
        .bar {background-color: #e94949; width: 40%; height: 65%; border: 1px solid #475a69;}
        .bar>div {height:80%; border-width: 1px 0 0 1px; border-style: solid; border-color: #ec9493 #e94949 #e94949 #ec9493;}
    </style>
</head>
<body>
    <div class="graph">
        <div>
            <div class="bar"> 
                <div> </div>
            </div>
        </div>
    </div>
</body>
</html>

上面的html产生了这个：

enter image description here

在gsmarena上他们使用图像，但这是在纯CSS中完成的。对于1px高光，你需要4个div而不是2个。

这一切都是使用Gimp复制图片颜色和Firebug for firefox / chrome来对css进行排序。

HTML：颜色评级栏

1 个答案: