标签：style blog http color os java ar 2014 div
通过五个五角星展示分数的效果，能实现根据长度显示星星内部的效果，比如只有2.1个星这样的效果，如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
.box215{width:215px;border-bottom:1px solid #e5e5e5;padding-bottom:10px;margin-left: 20px;}
.titPf{height:40px;line-height:40px;}
.scroCol{height:29px;padding-bottom:10px;}
.staL{float:left;display:inline;margin:10px 7px 0 0;background:#b4b3b1;width:99px;height:14px;}
.yelloS{background:#f2d03d;width:1px;height:14px;}
.scoR{float:left;display:inline;margin:5px 0 0 0;}
.scoB{font-family:Arial;font-size:18px;color:#cc0001;}
.scoP{color:#999999;}
</style>
<div class="box215">
<div class="titPf f14">打分：</div>
<div class="scroCol clearfix">
<div class="staL">
<div class="yelloS" id="score"><img src="http://images.cnitblog.com/blog/663787/201409/051536243445294.gif" width="99" height="14" /></div>
</div>
<div class="scoR"><em class="scoB" id="fen">4.8</em><em class="scoP"></em></div>
</div>
<script type="text/javascript">
var n = 2;//获取星星之间的间隔，比如会有3颗星星，中间的间隔就是2，因为星星之间是有间隙的，所以需要加上间隔的长度
var len = 6*n + 36;
document.getElementById("score").style.width = len + "px";
</script>
</div>
</body>
</html>
标签：style blog http color os java ar 2014 div
原文地址：http://www.cnblogs.com/ycx0317/p/3958219.html
