`
lhb3015
  • 浏览: 9862 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

星级评分1

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="owner" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<style type="text/css">
<!--
body {background:#fff;text-align:center;margin:0 auto;padding: 0;font:12px Arial;color:#000;line-height:1.2em}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 星级评分 */
.shop-rating {
    height: 25px;
    overflow: hidden;
    zoom: 1;
    padding: 2px 0px;
    position: relative;
    z-index: 999;
}
.shop-rating span {
    height: 23px;
    display: block;
    line-height: 23px;
    float: left;
}
.shop-rating span.title {
    width: 125px;
    text-align: right;
    margin-right: 5px;
}
.shop-rating ul {
    float: left;
margin:0;padding:0
}
.shop-rating .result {
    margin-left: 20px;
    padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.shop-rating .result em {
    color: #f60;
    font-family: arial;
    font-weight: bold;
}
.shop-rating .result strong {
color: #666666;
font-weight: normal;
}
.rating-level,
.rating-level a {
    background: url(star_v2.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
    background-position: 0px 0px;
    width: 120px;
    height: 23px;
    position: relative;
    z-index: 1000;
}
.rating-level li {
    display: inline;
}
.rating-level a {
    line-height: 23px;
    height: 23px;
    position: absolute;
    top: 0px;
    left: 0px;
    text-indent: -999em;
    *zoom: 1;
    outline: none;
}
.rating-level a.one-star {
    width: 20%;
    z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
    width: 60%;
    z-index: 4;
}
.rating-level a.four-stars {
    width: 80%;
    z-index: 3;
}
.rating-level a.five-stars {
    width: 100%;
    z-index: 2;
}
.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
-->
</style>
</head>
分享到:
评论

相关推荐

    星星评分 星级 五星评分

    "星星评分 星级 五星评分"这个主题聚焦于一种常见的评分方式——星级评分系统,它通常由一到五星表示,五星代表最高评价。在Web开发中,实现这样的功能主要依赖JavaScript(js)技术。 首先,我们要理解星级评分的...

    实现星星评分功能

    在IT行业中,实现星星评分功能是一项常见的需求,尤其在电商、评论系统以及各种用户评价场景中。本篇文章将深入探讨如何使用Java来实现这一功能,包括设计思路、关键代码实现以及可能遇到的问题。 首先,我们需要...

    wpf实现星级评分

    wpf实现简单的星级评分

    Android星级评分组件

    1. UI设计:星级评分组件的UI主要由一系列的ImageView组成,每个ImageView代表一颗星。图片资源可以是空心星星(未选中)和实心星星(已选中),通过切换图片实现评分状态的变化。 2. 事件监听:添加...

    jQuery+PHP实现星级评分代码

    在构建Web应用时,增强用户体验的一个重要特性是提供星级评分功能。这允许用户对网站上的内容,如文章、电影或资源,进行评价,为其他用户提供参考,并为网站增添互动性。本文将详细介绍如何利用jQuery和PHP来实现这...

    web端星星评分

    web端星星评分,封装了js代码,可重复利用。没有html和css,需要自己写

    js+html星级评分(支持半星)

    接下来,我们使用JavaScript(这里可以使用jQuery或者其他库,但也可以纯JavaScript实现)来监听选择框的改变事件,当用户选择一个新的评分时,更新星星的样式。例如: ```javascript document.getElementById('...

    jquery 星级评分插件

    **jQuery 星级评分插件详解** 在Web开发中,为用户提供直观的反馈和互动是至关重要的,其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得创建...

    星星评分控件

    1. 图片资源:在设计星星评分控件时,通常会使用两种类型的图片——未选中状态的星星和已选中状态的星星。未选中状态的星星表示用户还没有给予评级,而选中状态的星星则代表用户已选择的评级。这些图片可以通过SVG...

    Bootstrap图标实现移动端的星星评分功能

    Bootstrap图标在移动端应用中常用于增强用户界面的视觉效果,特别是在实现星星评分功能时,它能够提供直观且易于理解的反馈。Bootstrap图标库通常包含了多种预定义的图标,包括星形图标,这些图标设计简洁、响应式且...

    一个简单的星级评分,您可以更轻松地自定义图像和动画

    标题提到的"一个简单的星级评分",是针对用户评价或反馈系统中常见的一种UI元素,它允许用户通过选择星星的数量来表达他们对某个产品或服务的满意度。这种组件在各种应用中广泛使用,如电商、餐饮、电影评分等场景。...

    jQuery 星星评分代码

    【jQuery星星评分代码】是一种常见的用户界面元素,用于让用户对某个内容或服务进行评价,通常以星形图标表示。在Web开发中,星星评分系统能够为网站增添互动性,提高用户体验,同时也便于收集用户反馈。这个特定的...

    js评分效果 星级评分 js星级评分效果

    JavaScript(简称JS)星级评分效果是一种常见的用户交互设计,它允许用户通过选择星星数量来对某个项目进行评价,常用于电商、评论系统等场景。在本文中,我们将深入探讨如何实现这种js星级评分效果,以及涉及到的...

    asp 简单易用的星星评分/评级 有注释

    在给定的资源中,“asp 简单易用的星星评分/评级 有注释”是一个利用ASP技术实现的星星评分系统,适用于产品评价或服务质量评估,类似于淘宝等电商平台上的用户反馈机制。 该系统的核心功能是让用户通过选择星星的...

    jq星星评分打分

    "jq星星评分打分"指的是利用jQuery实现的一种用户界面功能,让用户能够对内容进行评价,通常以五角星的形式展示,用户可以点击选择一到五星来表示他们的满意度或评分。 在网页开发中,星星评分系统是一种常见的互动...

    jQuery星级评分插件

    1. **动态显示评分**:用户可以通过鼠标悬停或点击来预览和设置评分,插件会实时更新显示的星星数量,为用户提供直观的反馈。 2. **自定义星星样式**:开发者可以调整星星的图像、颜色、大小等视觉元素,以符合网站...

    Jquery 星级评分插件

    **jQuery星级评分插件——Raty详解** 在Web开发中,提供用户友好、直观的界面是至关重要的。其中,星级评分系统是常见的交互元素,用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件,它使得在网页...

    基于Vue的星级评分功能

    这里的`stars`可能是一个数组,如`[1, 2, 3, 4, 5]`,代表最大评分。`rating`是当前的评分值,`filled`类将根据`star`是否小于或等于`rating`来决定是否添加,从而控制星星的填充状态。 在组件的脚本部分,我们需要...

    简易 js星星评分html代码

    在网页设计中,星星评分系统是一种常见的用户反馈方式,它让用户能够通过点击星星来直观地表达对某个产品或服务的满意度。本项目名为"简易 js星星评分html代码",主要展示了如何利用JavaScript、HTML和Bootstrap框架...

    jquery实现星级评分效果

    在网页设计中,星级评分是一种常见的用户界面元素,它允许用户对内容或服务进行直观的评价,通常以一到五星的形式展示。jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画效果等功能,使得...

Global site tag (gtag.js) - Google Analytics