页面内容:
CSS内容:
图片效果及图片见附件。
[img]http://dl.iteye.com/upload/attachment/275425/79e984ec-2af6-3660-b7b8-5f19bbdeb5d6.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275427/ad628dd1-1fff-3a6e-a35f-156d9b2dc712.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275429/1ca5a424-62ab-310b-a8d3-a580b29f9a09.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275431/4ac35bf6-557f-3602-89db-58ad65958eda.bmp[/img]
[img]http://dl.iteye.com/upload/attachment/275433/09a7efc7-d7ea-37fa-b763-e080ef041a13.bmp[/img]
<html>
<head>
<link rel="stylesheet" href="./show.css" type="test/css">
</head>
<body>
<div class='box'><div id="score_rate" class="rate" style="width:75%"></div><div class="rate_text" id="score_text">75分</div></div>
</body>
</html>
CSS内容:
.box
{
width:100px;
height:20px;
/*background:#f4cea3;*/
background: url('./images/staroff.gif') top left repeat-x;
border:1px solid red;
font-size: 7px;
position:relative
}
.rate
{
/*width:50px;*/
height:100%;
/*background:red;*/
background: url('./images/staron.gif') top left repeat-x;
position:absolute;
}
.rate_text
{
width:100%;
height:100%;
top:12.5%;
position:absolute;
text-align:center;
vertical-align:middle;
color: red;
font-size: 15px;
font-family: monospace;
}
图片效果及图片见附件。
[img]http://dl.iteye.com/upload/attachment/275425/79e984ec-2af6-3660-b7b8-5f19bbdeb5d6.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275427/ad628dd1-1fff-3a6e-a35f-156d9b2dc712.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275429/1ca5a424-62ab-310b-a8d3-a580b29f9a09.gif[/img]
[img]http://dl.iteye.com/upload/attachment/275431/4ac35bf6-557f-3602-89db-58ad65958eda.bmp[/img]
[img]http://dl.iteye.com/upload/attachment/275433/09a7efc7-d7ea-37fa-b763-e080ef041a13.bmp[/img]