HTML: цветная рейтинговая строка - PullRequest
Новая
       2

HTML: цветная рейтинговая строка

0 голосов
/ 06 августа 2011

Я пытаюсь добиться цветовой шкалы, похожей на ту, что есть на сайте 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)?

1 Ответ

4 голосов
/ 06 августа 2011

Я бы сказал, что у вас достаточно хорошо. Индикатор выполнения 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>

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. Вам нужно 4 деления вместо 2 для бликов 1px.

Все это делается с помощью Gimp для копирования цветов изображения и Firebug для Firefox / Chrome для сортировки CSS.

...