当前位置: 代码迷 >> HTML/CSS >> 星星评分-得分展示(CSS)
  详细解决方案

星星评分-得分展示(CSS)

热度:399   发布时间:2012-11-23 00:03:43.0
星星评分--得分显示(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;
}


图片效果及图片见附件。













  相关解决方案