css实现百分比进度条

最新推荐文章于 2025-04-10 19:57:37 发布

xlb_123

最新推荐文章于 2025-04-10 19:57:37 发布

阅读量6.2k

点赞数 2

分类专栏： web前端开发 css相关文章标签： css 百分比进度条

本文链接：https://blog.youkuaiyun.com/qq736150416/article/details/52021336

版权

web前端开发同时被 2 个专栏收录

153 篇文章

订阅专栏

css相关

33 篇文章

订阅专栏

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