Question

以下是我对5星评级系统的代码。

    <span id="rateStatus"></span>
    <div id="rateMe">   

        <a onclick="rateIt(this)" id="_1" title="1 - Customers do not like/want it (idea / solution / service)" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_2" title="2 - Customers will consider it only if the price is better" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_3" title="3 - Customers want it and will buy if the quality is superior to competition" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_4" title="4 - Customers need it – will share development cost if necessary" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_5" title="5 - Unique offering - Customers will buy it immediately" onmouseover="rating(this)" onmouseout="off(this)"></a>

    </div>
    <span id="ratingSaved"> </span>


    <style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #ratingSaved{display:none;}
    .saved{color;brown; }

    #rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on {background:url('/resource/1314262224000/green_star') no-repeat;}
    #rateMe a{float:left;background:url('/resource/1314262035000/white_star') no-repeat;width:40px; height:40px;}




    </style>

这显示1行5星......但我还需要3行......如何修改css以获得相同的效果。

事先提前

Answer 1

对于出现多次的元素，ID适用于唯一的类。您可以使用id来区分这些行。

<div class='rateMe' id='row1' / >
<div class='rateMe' id='row2' / >
<div class='rateMe' id='row3' / >
...

Answer 2

您可以复制代码，但不应使用id = "rateMe"，而应使用c lass = "rateMe"（正如juhana所说）

这样你可以拥有3行5星（这就是你想要的吗？）

html 5星评级css

2 个答案: