星级评分展示CSS样式技巧

William2012-08-18 14:52设计37,885次浏览50条评论

扫一扫手机看

很多网站目前都有评分功能，当然随之而来的是如何更加简单方便的显示出星星亮的个数。

很多网站展示的时候是一颗整亮星+半颗亮星，比如5分就显示2个半，5.3分还是显示2个半，4.9分则显示2个亮星，四舍五入了。

这样当然不是最优的显示方式，最优的方式肯定是多少分就显示多少比例的星星，换一种思维就是通过百分比来显示，这样的好处就是只要设计一个亮星和一个暗星就行了，其余的通通交给比例来实现，这样的方式更加精准，同时避免了程序对分数进行哪些不必要的四舍五入判断。

当然，实现这个效果是异常简单的，简单说来就是先放一个背景，然后在背景上面放一个图片，然后显示图片能看到的比例就行。

下面具体看代码：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评分展示CSS样式技巧 - 威言威语weisay.com</title>
<style type="text/css">
.vote-star{
	display:inline-block;/*内联元素转换成块元素，并不换行 weisay.com*/
	margin-right:6px;
	width:85px;/*5个星星的宽度 weisay.com*/
	height:17px;/*1个星星的高度 weisay.com*/
	overflow:hidden;
	vertical-align:middle;
	background:url(https://img.weisay.com/weiimg/article/495_1.gif) repeat-x 0 -17px;}
.vote-star i{
	display:inline-block;/*内联元素转换成块元素，并不换行 weisay.com*/
	height:17px;/*1个星星的高度 weisay.com*/
	background:url(https://img.weisay.com/weiimg/article/495_1.gif) repeat-x 0 0;}
.vote-number{
	vertical-align:middle;
	font-family:微软雅黑, Verdana, Geneva, sans-serif;
	font-size:12px;}
</style>
</head>
<body>
<div class="star">
<span class="vote-star"><i style="width:97%"></i></span><span class="vote-number">9.7分</span>
<br /><br />
<span class="vote-star"><i style="width:44%"></i></span><span class="vote-number">4.4分</span>
<br /><br />
<span class="vote-star"><i style="width:13%"></i></span><span class="vote-number">1.3分</span>
</div>
</body>
</html>

程序只要做一件简单的事情，就是控制代码里面的 width:97% ，宽度的比例就行，这样就能实现精准的星级评分展示效果了。

星级评分展示CSS样式技巧：目前有 50 条评论

33楼
yhc：

星级评分展示CSS样式技巧在文档最前面加个（尖括号!DOCTYPE HTML）尖括号，在IE9显示就乱了，FF和chorm正常

2014-08-22 10:04 回复
- William博主：
  
  @yhc看看是不是编码问题，上面我用的是utf8的。
  
  2014-09-05 14:13 回复
  - 努力：
    
    @Williamdiv的宽度怎么调。从数据库得到一个比例，怎么调div的宽。
    
    2015-08-07 19:46 回复
    - William博主：
      
      @努力这个要看你整个5颗星的宽度了，只要把星星位置定好，其他的就是控制比例了
      
      2015-08-17 18:11 回复
32楼
红色石头：

这个插件不会是博主做的吧，以前在osc上看到过的~很不错~

2013-01-16 10:36 回复
31楼
上善若水：

呵呵，串个门看看，威兄MS也好久不更新博客了啊

2012-10-26 15:07 回复
- William博主：
  
  @上善若水有点懒，呵呵
  
  2012-10-27 13:20 回复
30楼
林肆：

有了这个初步的设计，后面的评分功能就可以顺着做啦！设计的很不错哇~

2012-10-14 20:52 回复
- William博主：
  
  @林肆评分功能就是开发的事情了
  
  2012-10-16 10:33 回复
  - W3Cshare前端分享：
    
    @William同意这个观点
    
    2012-10-25 15:42 回复
29楼
魏星博客：

漂亮！！！

2012-10-09 18:46 回复
28楼
koobai：

只会从这里抄点那里抄点，自己写是完全不会～～

2012-10-04 19:46 回复
- William博主：
  
  @koobai其实写倒是不难，重要是想到方法
  
  2012-10-15 13:58 回复
27楼
愛惜：

现在看代码都头疼了。。。
双节来了。祝双节快乐。

2012-09-30 19:19 回复
26楼
ZIVPIN：

照着捣鼓下·

2012-09-30 08:10 回复
25楼
hiswing：

还需要script和后台配合才行。

2012-09-25 09:33 回复
24楼
43度：

技术男，最近又鼓捣啥呢啊、现在啥都网轻上靠了。

2012-09-23 00:50 回复
- William博主：
  
  @43度上班、上班、还是上班
  
  2012-09-27 14:21 回复
- 小强文摘：
  
  @43度唐山的？
  
  2013-01-29 11:46 回复
23楼
wmtimes：

评分啊。我怎么没找到。

2012-09-12 11:47 回复
- William博主：
  
  @wmtimes只是做了一个评分以后的展示而已，没有评分功能
  
  2012-09-13 18:07 回复
22楼
木本无心：

css比js利索多了。。。。

2012-09-09 19:52 回复
- 林肆：
  
  @木本无心木木你要抽空看看我的网站为啥偶尔有加载错误，是不是JS什么的问题啊。
  
  2012-10-14 20:51 回复
21楼
宁峰：

怎么点了不管用？

2012-09-09 09:03 回复
- William博主：
  
  @宁峰这个只是评分好的之后的展示，不是点击评分的功能~
  
  2012-09-09 21:19 回复