HTML/CSS

订阅所有【HTML/CSS】的日志

文章评级代码

编辑:dnawo 日期:2008-03-08

字体大小: 小中大

HTML代码

<style type="text/css">
.star_rating {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(pic/200803/005.gif) repeat-x 0px 0px; PADDING-BOTTOM: 0px; MARGIN: -1px 0px 0px -1px; OVERFLOW: hidden; WIDTH: 70px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 12px
}
.star_rating LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.star_rating LI A {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; Z-INDEX: 20; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 14px; TEXT-INDENT: -9000px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 12px; TEXT-DECORATION: none
}
.star_rating LI A:hover {
	Z-INDEX: 2; BACKGROUND: url(pic/200803/005.gif) 0px 12px; LEFT: 0px
}
.star_rating A.one_star {
	LEFT: 0px
}
.star_rating A.one_star:hover {
	WIDTH: 14px
}
.star_rating A.two_stars {
	LEFT: 14px
}
.star_rating A.two_stars:hover {
	WIDTH: 28px
}
.star_rating A.three_stars {
	LEFT: 28px
}
.star_rating A.three_stars:hover {
	WIDTH: 42px
}
.star_rating A.four_stars {
	LEFT: 42px
}
.star_rating A.four_stars:hover {
	WIDTH: 56px
}
.star_rating A.five_stars {
	LEFT: 56px
}
.star_rating A.five_stars:hover {
	WIDTH: 70px
}
.star_rating LI.current_rating {
	DISPLAY: block; Z-INDEX: 1; BACKGROUND: url(pic/200803/005.gif) 0px 24px; LEFT: 0px; TEXT-INDENT: -9000px; POSITION: absolute; HEIGHT: 12px
}
</style>
<ul class="star_rating">
  <li class="current_rating" style="width:0px;"></li>
  <li><a href="#" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li>
  <li><a href="#" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li>
  <li><a href="#" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li>
  <li><a href="#" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li>
  <li><a href="#" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li>
</ul>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇: IE7 与 IE6 的模式窗口尺寸差异

下一篇: 新云修改：支持软件下载页生成HTML

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 0 | 引用: 0 | 查看次数: 4466

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.519531 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1