欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用HTML制作一个仿淘宝的五星评价实例

程序员文章站 2022-04-24 09:49:11
...
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单。

首先我们整理一下思路,这效果要怎么做出来,因为这个分数的原因,很容易让人联想到进度条,所以就想到了用遮罩来出来。做法很简单,灰色星星的图片放在下面,然后亮色星星的图片在上面,重叠两张图片,任何控制上面亮色的星星图片,根据分数显示它的长度,这样便能实现这个效果了。废话不多说,直接把代码贴上。

<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>

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

以上就是利用HTML制作一个仿淘宝的五星评价实例的详细内容,更多请关注其它相关文章!

相关标签: HTML,实例