css实现百分比进度条

来源:互联网 发布:golang redis pool 编辑:程序博客网 时间:2024/06/05 06:51
<!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>
0 0
原创粉丝点击