打分效果

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
<!--

ol {
	position:relative;
	padding:0;
	list-style:none;
	width:30px;
	height:75px;
	background:url("http://bbs.blueidea.com/attachments/2006/12/17/bg_A7PN3GoZ1ufW.gif") repeat-y center top;
	}
li {
	width:30px;
	height:15px;
	font:0/15px "宋体";
	}
a {
	position:absolute;
	z-index:3;
	width:30px;
	height:15px;
	text-decoration:none;
	}
a:hover {
	bottom:0;
	z-index:2;
	background:url("http://bbs.blueidea.com/attachments/2006/12/17/bg_A7PN3GoZ1ufW.gif") repeat-y left top;
	}
#a1 {
	bottom:0;
	}
#a2 {
	bottom:15
	}
#a3 {
	bottom:30
	}
#a4 {
	bottom:45
	}
#a5 {
	bottom:60
	}
#a1:hover {
	height:15px;
	}
#a2:hover {
	height:30px;
	}
#a3:hover {
	height:45px;
	}
#a4:hover {
	height:60px;
	}
#a5:hover {
	height:75px;
	}
ol li#li1 {
	position:absolute;
	bottom:0;
	width:30px;
	height:30px;
	background:url("http://bbs.blueidea.com/attachments/2006/12/17/bg_A7PN3GoZ1ufW.gif") repeat-y right bottom;
	}
a span {
	display:none;
	}
a:hover span {
	position:absolute;
	top:0;
	left:60px;
	display:block;
	width:20px;
	height:16px;
	font:bold 12px/16px "宋体";
	color:#fff;
	text-align:center;
	border:1px solid red;
	background:orange;
	}
em {
	display:block;
	position:absolute;
	top:2px;
	left:-21px;
	font:0/0 "宋体";
	border:6px solid;
	border-color:#fff #f00 #fff #fff;
	}

-->
</style>
打分效果
<ol>
<li><a href="#" id="a5" title="5">+5</a></li>
<li><a href="#" id="a4" title="4">+4</a></li>
<li><a href="#" id="a3" title="3">+3</a></li>
<li><a href="#" id="a2" title="2">+2</a></li>
<li><a href="#" id="a1" title="1">+1</a></li>
<li id="li1"></li>
</ol>
目前得分2
<hr/>

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

posted @ 2007-02-01 15:10 海浪~~ 阅读(109) 评论(0) 收藏举报

刷新页面返回顶部

海浪

打分效果

公告