Star rate评分效果 - 达人(缺缺)

2005/09/27 | Star rate评分效果
类别(HTML&CSS) | 评论(0) | 阅读(174) | 发表于 10:22: <style> /* styles for the star rater */ .star-rating{ list-style:none; margin: 3px; padding:0px; width: 100px; height: 20px; position: relative; background: url(http://komodomedia.com/blog/samples/star_rating.gif) top left repeat-x; } .star-rating li{ padding:0px; margin:0px; /*\*/ float: left; /* */ } .star-rating li a{ display<IMG SRC="smile/07.gif">lock; width:20px; height: 20px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0px; background-image:none; } .star-rating li a:hover{ background: url(http://komodomedia.com/blog/samples/star_rating.gif) 0px -20px repeat-x; z-index: 1; left: 0px; } .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:hover{ width: 60px; } .star-rating a.three-stars{ left: 40px; } .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; } </style> <ul class='star-rating'> <li><a href='#' title='Rate this 1 star out of 5' class='one-star'>1</a></li> <li><a href='#' title='Rate this 2 stars out of 5' class='two-stars'>2</a></li> <li><a href='#' title='Rate this 3 stars out of 5' class='three-stars'>3</a></li> <li><a href='#' title='Rate this 4 stars out of 5' class='four-stars'>4</a></li> <li><a href='#' title='Rate this 5 stars out of 5' class='five-stars'>5</a></li> </ul>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]; 0

http://allinhands.5d.cn/

评论Comments