css实现百分比进度条

最新推荐文章于 2024-06-05 18:34:39 发布

xlb_123

最新推荐文章于 2024-06-05 18:34:39 发布

阅读量6.1k

点赞数 2

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

本文链接：https://blog.csdn.net/qq736150416/article/details/52021336

版权

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

153 篇文章 1 订阅

订阅专栏

css相关

33 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xlb_123

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现百分比进度条

html lang="en">head> meta charset="UTF-8"> title>测试title> style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding:
复制链接

扫一扫