【免费】用css在网页上测试评分详解资源-CSDN文库

共1个文件

txt：1个

需积分: 0 177 浏览量更新于2008-12-21 收藏 2KB RAR 举报

在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现方式的重要技术。在"用css在网页上测试评分详解"的主题下，我们将深入探讨如何利用CSS实现在线测试评分的功能，这对于构建交互性强、用户体验良好的在线教育平台至关重要。我们需要理解CSS的基本概念。CSS允许开发者通过定义样式规则来分离内容与表现，使得页面布局和视觉效果更加灵活。在创建评分系统时，我们可以使用CSS来设定分数显示的样式，如颜色、字体、大小等，以直观地向用户展示得分情况。 1. **评分显示样式**：在网页上，我们可以创建一系列的星星图标作为评分元素，通过改变它们的填充状态来表示不同的分数。例如，一颗全填充的星星代表满分，半填充的星星表示半分，未填充的星星表示零分。使用伪类如`:before`和`:after`可以方便地创建这些图标，再通过CSS控制其背景图片或颜色状态。 2. **动态评分**：利用CSS的`:hover`和`:active`伪类，我们可以实现用户悬停和点击时即时预览评分的效果。当鼠标悬停在星星上时，对应的星星变为高亮；点击时，被选中的星星保持高亮，其余恢复原状。 3. **JavaScript结合**：虽然CSS能实现静态的评分显示，但动态评分和保存用户选择通常需要JavaScript的协助。通过JS监听事件，可以获取用户的评分选择，并更新CSS以显示用户的选择。同时，将评分数据发送到服务器进行持久化存储。 4. **响应式设计**：考虑到不同设备的屏幕尺寸，我们需要确保评分系统在各种屏幕尺寸下都能良好显示。利用CSS的媒体查询（@media），我们可以为小屏设备调整星星的大小和间距，保证其在手机和平板上的可读性和易用性。 5. **评分容器**：在HTML结构中，评分元素可以放在一个特定的容器内，通过CSS设置容器的宽度和对齐方式，确保评分条在页面上的布局合理。可以使用`display: flex`或`grid`来实现灵活的布局。 6. **过渡和动画**：为了提升用户体验，我们可以添加CSS的过渡效果，如当用户鼠标悬停或点击星星时，评分变化过程可以平滑过渡，而不是瞬间切换。这可以通过`transition`属性来实现。 7. **自定义评分样式**：除了星星，还可以使用其他图标或图形表示评分，如笑脸、心形等。利用CSS的`content`属性和`url()`函数，可以加载自定义图标。 CSS在创建在线测试评分系统中扮演着关键角色，它不仅可以美化界面，还能实现动态交互功能。结合JavaScript，我们可以打造一个功能完备、用户体验优秀的评分系统。对于开发者来说，熟练掌握CSS的应用技巧是提升网页设计水平的关键。

收起资源包目录

css评分.rar （1个子文件）

css评分.txt 5KB

资源推荐

资源预览

资源评论

首先是实现的原理从上一个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.参数文件引用以下是引用片段： <?php require("connectDB.php"); require("closeDB.php"); require("tableName.php"); require("openDB.php"); ?> 3.显示投票程序和更新投票数据程序以下是引用片段： <?php $rating_posted=$_GET['vote'];//pased variable by the the stars value $id=$_GET['id']; $query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Error: ".mysql_error()); $numbers=mysql_fetch_assoc($query); $checkIP=unserialize($numbers['used_ips']); $count=$numbers['total_votes'];//how many votes total $current_rating=$numbers['total_value'];//total number of rating added together and stored $sum=$rating_posted+$current_rating;// add together the current vote value and the total vote value $tense=($count==1) ? "vote" : "votes";//plural form votes/vote $voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.bram.us/ - this variable searches through the previous ip address that have voted and returns true or false if($voted){ echo "<div class=\"rating\">". "<ul class=\"star-rating\">". "<li class=\"current-rating\" style=\"width:". @number_format($current_rating/$count,2)*20 ."px;\">Current rating.</li>". "<li class=\"one-star\">1</li>". "<li class=\"two-stars\" >2</li>". "<li class=\"three-stars\">3</li>". "<li class=\"four-stars\">4</li>". "<li class=\"five-stars\">5</li>". "</ul>". "<p>Rating: <strong>".@number_format($current_rating/$count,2)."</strong> {".$count." ".$tense." cast} <br />You have previously voted.</p></div>";//show the current value of the vote with the current numbers }else{ if(isset($_GET['vote'])){ if($sum==0){ $added=0;//checking to see if the first vote has been tallied }else{ $added=$count+1;//increment the current number of votes } if(is_array($checkIP)){ array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if it is an array i.e. already has entries the push in another value }else{ $checkIP=array($_SERVER['REMOTE_ADDR']);//for the first entry } $insert=serialize($checkIP); mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert."' WHERE id='".$_GET['id']."'"); echo "<div class=\"rating\"><p>Rating: <strong>".@number_format($sum/$added,2)."</strong> {".$added." ".$tense." cast} <span>Thank you for your vote!</span></p></div>";//show the updated value of the vote }else{ ?> 4.访问者评分程序以下是引用片段： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS: Star Rater Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="http://www.68design.net/art/styles2-1.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="rating"> <p>How clear was this tutorial?</p> <ul class="star-rating"> <li class="current-rating" style="width:<?php echo @number_format($current_rating/$count,2)*20 ?>px;">Current rating</li> <li><a href="http://www.68design.net/art/<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 1 star out of 5" class="one-star">1</a></li> <li><a href="http://www.68design.net/art/<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 2 stars out of 5" class="two-stars" >2</a></li> <li><a href="http://www.68design.net/art/<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 3 stars out of 5" class="three-stars" >3</a></li> <li><a href="http://www.68design.net/art/<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 4 stars out of 5" class="four-stars" >4</a></li> <li><a href="http://www.68design.net/art/<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 5 stars out of 5" class="five-stars" >5</a></li> </ul> </body></html> 5.最新评分结果提示以下是引用片段： <?php echo "<p>Rating: <strong>".@number_format($sum/$count,2)."</strong> {".$count." ".$tense." cast}</p></div>";//show the current updated value of the vote } // end isset get vote } //end voted true, false ?> 下一步是将结果记入数据库，现在没有时间去研究了，请大家等待下一篇文章或者去远出处阅读