CSS实例教程:CSS制作星级评价的功能- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例教程:CSS制作星级评价的功能

CSS样式表: css ID类和class类的长命名与短命名; CSS background-position的使用说明详解; 利用CSS定位背景图片 background-position; CSS 多图片融合背景定位的应用于优缺点分析; CSS实现的图片宽高自适应固定边框; css 背景图片定位在菜单效果中的应用实例; CSS 速记口诀可以解决一些常见问题; CSS 多浏览器兼容性问题及解决方案; css 行级元素在多浏览器下的宽度问题与解决方法; IE下行框高度的问题; CSS 实现的图片宽高自适应固定边框; css的核心内容标准流、盒子模型、浮动、定位等分析; CSS 超出隐藏实现限制字数的功能代码(多浏览器); Div+CSS 布局入门教程之二构建网站; CSS 网页布局中文排版的9则技巧; CSS网页布局25个实用小技巧; 网页制作默认Web字体样式; IE与Firefox的CSS兼容大全推荐; css 非表格垂直对齐效果代码; css cursor 的可选值（鼠标的各种样式）

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

CSS样式表中的 CSS实例教程:CSS制作星级评价的功能

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-30 浏览: 49 ::

收藏到网摘: n/a

总结学习web标准的十个重要理由 CSS实例教程:纯CSS实现圆角框

做一个星级评价的功能不是很难，但是要单纯用CSS写估计就有点难度了，先来个截图：

效果很简单，可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法：

CSS：

以下为引用的内容：

          .jsstar
        {   list-style: none;
            margin: 0px;
            padding: 0px;
            width: 100px;
            height: 20px;
            position: relative;

            }
         .jsstar li
         {
            padding:0px;
            margin: 0px;
            float: left;
            width:20px;
            height:20px;
            background:url(star_rating.gif) 0 0 no-repeat;
            }

HTML：

以下为引用的内容：

<p>Javascript + CSS实现</p>
<ul class="jsstar">
    <li title="一星"></li>
    <li title="二星"></li>
    <li title="三星"></li>
    <li title="四星"></li>
    <li title="五星"></li>
</ul>

JS：（我用的是jquery）

以下为引用的内容：

这里是效果图：

是不是和上面的没什么区别，可是又一想如果用户禁掉了javascript岂不是效果很惨？

于是我们想到了用纯CSS实现，下面是代码：

CSS：

以下为引用的内容：

1 /*CSS Star start*/
2         .star-rating
3         {
4             list-style: none;
5             margin: 0px;
6             padding: 0px;
7             width: 100px;
8             height: 20px;
9             position: relative;
10             background: url(star_rating.gif) top left repeat-x;
11         }
12         .star-rating li
13         {
14             padding: 0px;
15             margin: 0px;
16             float: left;
17         }
18         .star-rating li a
19         {
20             display: block;
21             width: 20px;
22             height: 20px;
23             text-decoration: none;
24             text-indent: -9000px;
25             z-index: 20;
26             position: absolute;
27             padding: 0px;
28         }
29         .star-rating li a:hover
30         {
31             background: url(star_rating.gif) left bottom;
32             z-index: 1;
33             left: 0px;
34         }
35         .star-rating a.one-star
36         {
37             left: 0px;
38         }
39         .star-rating a.one-star:hover
40         {
41             width: 20px;
42         }
43         .star-rating a.two-stars
44         {
45             left: 20px;
46         }
47         .star-rating a.two-stars:hover
48         {
49             width: 40px;
50         }
51         .star-rating a.three-stars:hover
52         {
53             width: 60px;
54         }
55         .star-rating a.three-stars
56         {
57             left: 40px;
58         }
59         .star-rating a.four-stars
60         {
61             left: 60px;
62         }
63         .star-rating a.four-stars:hover
64         {
65             width: 80px;
66         }
67         .star-rating a.five-stars
68         {
69             left: 80px;
70         }
71         .star-rating a.five-stars:hover
72         {
73             width: 100px;
74
75         }

HTML：

以下为引用的内容：

看看上面CSS的行号您是不是吓了一跳，这么简单的效果竟然用了这么多代码？在我看来不用JS就只能一个效果一个样式了，如果您还有更简单更炫的效果请指教！

示例代码下载

原文地址：http://www.cnblogs.com/gudao119/archive/2010/01/13/1646428.html

总结学习web标准的十个重要理由 CSS实例教程:纯CSS实现圆角框

CSS样式表 中的 CSS实例教程:CSS制作星级评价的功能

评论 (0) All

CSS样式表中的 CSS实例教程:CSS制作星级评价的功能