HTML：彩色评级栏

发布于 2024-11-28 00:16:00 字数 419 浏览 1 评论 0原文

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

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

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

编辑：

Gsmarena 中的评分栏如何将内部 div 恰好放置在外部 div 的中心，如图所示（取自 gsmarena）？

原文

I am trying to achieve color rating bar similar to the one in GsmArena website. I tried using divs as shown below.

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

Is there any other better way to design a rating bar? Any help is appreciated. Thanks in advance.

Edit:

Rating bar in Gsmarena
How to place the inside div exactly in the center of the outer div as shown in the picture (Taken from gsmarena)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉宸 2024-12-05 00:16:01

我会说你拥有的已经足够好了。 JQuery UI 进度条的作用非常相似：

<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>

在此处输入图像描述

编辑：如果您想要他们在 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 会生成以下内容：

在此处输入图像描述

在 gsmarena 上，他们使用图像，但这是用纯CSS完成的。您需要 4 个 div 而不是 2 个 div 来实现 1 像素的高亮显示。

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

I would say what you have is good enough. JQuery UI progress bar does something very similar:

<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

Edit: If you want the 'exact' of what they have at gsmarena then here is css that imitates what they do (following @Pelshoff's advice with splitting out the 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>

The above html produces this:

enter image description here

On gsmarena they use images, but this is done in pure css. You need the 4 divs instead of 2 for the 1px highlights.

This is all done using Gimp to copy the image colours and Firebug for firefox/chrome to sort the css.

回复收藏 0 原文

~没有更多了~