先看看效果
Step 1: XHTML
这里只介绍静态的技术，随后会给出系统的应用，你也是自己加程序来尝试一下，还可以采用ajax来做出绚丽的效果
Step 2:图像|Graphics
立即学习
“
前端免费学习笔记（深入）
”；
为了节省您的空间和宽带，我们采用gif图，这个图片就是打分的按钮。
图
Step 3:CSS
.star-rating{list-style: none; /* turn off the default list image bullets*/margin: 3px; /*I wan't some space around this thing*/padding: 0px; /* I'm anal. I'm pretty sure OL's have a default padding of 0px, but we'll set it to 0px just to be safe*/width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/background: url(star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list will appear to have five stars.*/}
根据代码我们知道：
去掉了ul的margin和padding以及list-style，定义了高20px宽100px的一个区块
下来时按钮元素的制作，下面是css
.star-rating li{padding:0px; /* no padding at all*/margin:0px; /* no margin at all*//*\*/ /*Backslash hack, this causes IE5 Mac NOT to see this rule*/float: left; /* for any other browser, we are going to float left, this makes a horizontal list*//* */ /* end the IE5 Backslash hack*/}
这段代码让li实现横向排放，并解决IE5 MAC bug
继承上面的按钮元素样式，再定义鼠标动作，下面是css
.star-rating li a{display:block; /* we want a block item, so that we can mess with its height and width*/width:20px; /* easy stuff, we want the width to be the same as the star width*/height: 20px; /* same as the width*/text-decoration: none; /* remove the underline from the link*/text-indent: -9000px; /* indent the text off the screen using a [url=http://www.php.cn/]image-replacement technique[/url], we dont want to see the text anymore.*/z-index: 20; /*we'll come back to this*/position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/padding: 0px; /*once again, we don't need any padding*/background-image:none; /* we will not show the star*/}13. .star-rating li a:hover{14. background: url(star_rating.gif) left bottom; /*this is where the magic is*/15. z-index: 1; /*move this star to the bottom of the z-index stack*/16. left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/17. }
下来我们要考虑怎样才能显示不同的星级，三星?四星?原理是什么，我们继续将背景图片横向重复显示，然后定义a和a:hover的宽度来区分选择的星级。
下面是css
.star-rating a.one-star{left: 0px;}.star-rating a.one-star:hover{width:20px;}.star-rating a.two-stars{left:20px;}.star-rating a.two-stars:hover{width: 40px;}.star-rating a.three-stars{left: 40px;}.star-rating a.three-stars:hover{width: 60px;}.star-rating a.four-stars{left: 60px;}.star-rating a.four-stars:hover{width: 80px;}.star-rating a.five-stars{left: 80px;}.star-rating a.five-stars:hover{width: 100px;}
到此，这个制作完成
第一个模型中忽视了半星级的情况和无初始的星级，下来我们就是要解决这个问题。
Step 1. 先看看效果|Check it in action
图1
看看效果
Step 2: The XHTML
和第一个模型的结构相似，唯一不同的是:
Currently 3.5/5 Stars.
定义初始值
Step 3: The Star Image
我们制作一个有三个星的图片，第一个星是空值，第二个是要选择的值，第三个是真实的值。
图2
Step 4: The CSS, the Magic
.star-rating li.current-rating{background: url(star_rating.gif) left bottom;position: absolute;height: 30px;display: block;text-indent: -9000px;z-index: 1;}
他定义了初始值，为了避免继承容器ul的相对定位，采用position: absolute;每个星的高度为height:30px;别的就是隐藏文本和定义对齐方式。
空值css
.star-rating{…background: url(star_rating.gif) top left repeat-x;}
选择值css
.star-rating li a:hover{background: url(star_rating.gif) left center;…}
初始值当然会随着选择变动，那么怎样实现它的变化呢?
Currently 3.5/5 Stars.
看了这段代码相信你就知道是什么原因了!那这个width是怎样计算的呢?
Average Rating|平均值: 3.5Each Star Width|每个星的宽度: 30px;Set width to|将宽度设为: 3.5 * 30 = 105px
下面欣赏一下这个新模型吧
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical star rating system
我们用php来实现
首先是实现的原理
从上一个css实现星级评分I 、II，可是看出，只要能识别onclick和将数据记录至数据库中存储，然后从数据库中调用出数据进行计算就
可以得到当前的评分均值——当前的分值。
1.下面是建立数据库的sql
CREATE TABLE ratings(id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,total_votes INT NOT NULL,total_value INT NOT NULL,which_id INT NOT NULL,which_table VARCHAR(255),used_ips LONGTEXT NULL);
2.参数文件引用
3.显示投票程序和更新投票数据程序
".
"".
"CSS: Star Rater Example
Rating: ".@number_format($current_rating/$count,2)." {".$count." ".$tense." cast}
You have previously voted.
Rating: ".@number_format($sum/$added,2)." {".$added." ".$tense." cast} Thank you for your vote!
";//show the updated value of the vote }else{ ?> 4.访问者评分程序How clear was this tutorial?
5.最新评分结果提示 Rating: ".@number_format($sum/$count,2)." {".$count." ".$tense." cast}";//show the current updated value of the vote} // end isset get vote} //end voted true, false?>