I have been doing a project recently and achieved a five-star rating. The score display must be accurate to the decimal point, that is, if the score is 4.3 points, 4.3 stars will be displayed. This may seem difficult, but it is very simple to do.
First of all, let’s sort out our thoughts on how to achieve this effect. Because of this score, it is easy to think of progress bar, so we thought of using a mask to come out. The method is very simple, put the picture of the gray star below, and then the bright star picture on top, overlap the two pictures, and control the bright star picture above to display its length according to the score, so that it can be achieved This has the effect. Without further ado, just paste the code.
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#bg{
width: 60px;
height: 16px;
background: url("img/star_gray.png");
}
#over{
height:16px;
background:url("img/star_org.png") no-repeat;
}
</style>
</head>
<body>
<div id="bg"><!--这里是背景，也就是灰色的星星-->
<!--说明，这里的width就是设置分数啦，以我写的为例，一个星星的长度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的长度，当然这个一般是取得数据后用js或者其他模板语言去控制的-->
<div id="over" style="width:51.6px"></div><!--这里是遮罩，设置宽度以达到评分的效果-->
</div>
</body>
</html>【Related Recommendations】
1. Special Recommendation:"php Programmer Toolbox" V0.1 Version download
2. Free html online video tutorial
3. php.cn Original html5 video tutorial
The above is the detailed content of Use HTML to create a Taobao-like five-star review example. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
