徒手写进度条

最新推荐文章于 2025-03-19 00:46:13 发布

原创最新推荐文章于 2025-03-19 00:46:13 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

HTML5第一季

3 篇文章

订阅专栏

欢迎各种吐槽。

今天遇到一个要表示问卷调查填写进度的需要,这里做一个笔记供大家参考:

如下图:

1.进度条的数值根据做题的比例显示,后台传入;

2.进度条代码:

2.1 div2是进度条的表框,div3是进度条显示长度

<style>
.div2{
width:75%;
height: 20px;
float: left;
border: 1px solid; #ccc;
}
.div3{
width:0%;
height: 20px;
line-height: 20px;
text-align: center;
background-color: rgb(102,205,153);
}
.span1{
width: auto;
line-height: 20px;
}
</style>
<body>
	<div name="prevDialysisInfo" style="width:100px;clear:both;cursor:pointer;white-space: nowrap;margin-top: 14px;" > 
                                                  				
				<div class="div2">
					<div class="div3" style="width:20%"></div>
				</div>
				<span class="span1">20%</span>
	</div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        .Bar { position: relative; width: 200px;
            /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
        .Bar div{ display: block; position: relative;
            background:peachpuff;/* 进度条背景颜色 */ color: #333333;
            height: 20px; /* 高度 */ line-height: 20px;
            /* 必须和高度一致，文本才能垂直居中 */ }
        .Bar div span{ position: absolute; width: 200px;
            /* 宽度 */ text-align: center; font-weight: bold; }

    </style>
</head>
<body>
        百分比进度条样式:
    <div class="Bar">
        <div style="width:70%;">
            <span>70%</span>
        </div>
    </div>
</body>
</html>