星星评分--得分显示（CSS）

最新推荐文章于 2024-03-15 15:20:37 发布

iteye_7736

最新推荐文章于 2024-03-15 15:20:37 发布

阅读量697

点赞数

文章标签： CSS HTML

本文链接：https://blog.csdn.net/iteye_7736/article/details/81891324

版权

页面内容:

<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]

iteye_7736

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
星星评分--得分显示（CSS）

页面内容:[code="html"]75分[/code]CSS内容:[code="java"].box{ width:100px; height:20px; /*background:#f4cea3;*/ background: url('./images/staroff.gif') top left repea...
复制链接

扫一扫