星星评分-得分展示（CSS）-HTML教程-爱易网页

星星评分-得分展示（CSS）

日期：2014-05-17　浏览次数：20654 次

星星评分--得分显示（CSS）
页面内容:

<html>
<head>
<link rel="stylesheet" href="./show.css" type="test/css">
</head>
<body>
<div class='box'><div id="score_rate" class="rate" style="width:75%"></div><div class="rate_text" id="score_text">75分</div></div>
</body>
</html>

CSS内容:

.box
{
    width:100px;
    height:20px;
    /*background:#f4cea3;*/
	background: url('./images/staroff.gif') top left repeat-x;
    border:1px solid red;
    font-size: 7px;
    position:relative
}
.rate
{
    /*width:50px;*/
    height:100%;
    /*background:red;*/
	background: url('./images/staron.gif') top left repeat-x;
    position:absolute;
}
.rate_text
{
    width:100%;
    height:100%;
	top:12.5%;
    position:absolute;
    text-align:center;
	vertical-align:middle; 
    color: red;
    font-size: 15px;
    font-family: monospace;
}

图片效果及图片见附件。