很多网站目前都有评分功能,当然随之而来的是如何更加简单方便的显示出星星亮的个数。
很多网站展示的时候是一颗整亮星+半颗亮星,比如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(/blog/weiimg/article/star.gif) repeat-x 0 -17px;} .vote-star i{ display:inline-block;/*内联元素转换成块元素,并不换行 weisay.com*/ height:17px;/*1个星星的高度 weisay.com*/ background:url(/blog/weiimg/article/star.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% ,宽度的比例就行,这样就能实现精准的星级评分展示效果了。
本文固定链接: https://www.weisay.com/blog/star-rating-use-css.html | 威言威语
星级评分展示CSS样式技巧 在文档最前面加个(尖括号!DOCTYPE HTML)尖括号 ,在IE9显示就乱了,FF和chorm正常
看看是不是编码问题,上面我用的是utf8的。
div的宽度怎么调。从数据库得到一个比例,怎么调div的宽。
这个要看你整个5颗星的宽度了,只要把星星位置定好,其他的就是控制比例了
这个插件不会是博主做的吧,以前在osc上看到过的~很不错~
呵呵,串个门看看,威兄MS也好久不更新博客了啊
有点懒,呵呵