【HTML】步骤进度条组件实现

最新推荐文章于 2024-06-09 09:49:42 发布

玉米子禾

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量2.7k

点赞数 1

分类专栏： Web 文章标签： html

本文链接：https://blog.csdn.net/xiaoyuhaoaimin/article/details/124065554

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML步骤进度条组件实现

效果图

思路

分份：

有多少个步骤就可以分成多少分，每份宽度应该为100%除以步骤数，故以上效果图中的每份宽度应该为25%，每份用一个div。

每份：

每份中可以看成是三个元素，一个使用span显示序号，一个使用div显示进度线，最后一个使用span显示文字，三者皆水平居中（或者本质上显示进度线的宽度为100%不需要居中，文本使用文本居中即可，序号div让其父div使用弹性居中布局），显示序号的写在显示进度线的后面（确保图层更高，序号不被覆盖），显示序号的和显示进度线的重合在同一行（显示序号使用absolute定位，弹性居中布局），显示文字的另起新行。

两边：

以上内容完成后分别在序号1和序号4的左边和右边会有多出来的背景，可以使用渐变效果，让其中一半显示显示背景色，另一半显示透明色即可。

已完成进度效果：

更改背景色即可，但要注意两边的效果

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>步骤进度条</title>
    <style>
        /* 使用弹性居中布局让所有分部居中水平排列 */
        .steps {
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        /* 进度线宽，4份，25% */
        .step {
            width: 25%;
            height: 20px;
        }

        /* 进度线和序号，使用弹性居中布局让序号和进度线居中 */
        .step-progress {
            display: flex;
            justify-content: center;
        }

        /* 文本居中 */
        .step-text {
            width: 100%;
            margin-top: 10px;
            text-align: center;
        }

        /* 进度线 */
        .step-line {
            width: 100%;
            height: 9px;
            margin-top: 7px;
            background-color: #cccccc;
        }

        /* 数字序号 */
        .step-num {
            width: 18px;
            height: 18px;
            line-height: 17px;
            /* 圆角背景 */
            border-radius: 50%;
            color: #ffffff;
            font-size: 16px;
            /* 序号居中显示 */
            text-align: center;
            background-color: #cccccc;
            border: 2px solid #cccccc;
            /* 使用相对于父元素定位，强行回到原来的位置 */
            position: absolute;
        }

        /* 使用渐变背景处理两边 */
        .step-progress.right div{
            background: linear-gradient(to right, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);
        }

        .step-progress.left div{
            background: linear-gradient(to left, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);
        }

        /* 完成效果 */
        .step-progress.done div{
            background: #4395ff;
        }
        .step-progress.done span{
            background-color: #4395ff;
            border: 2px solid #4395ff;
        }

        /* 完成效果左右两边特制 */
        .step-progress.right.done div{
            background: linear-gradient(to right, #4395ff 0%, #4395ff 50%, transparent 51%, transparent 100%);
        }

        .step-progress.left.done div{
            background: linear-gradient(to left, #4395ff 0%, #4395ff 50%, transparent 51%, transparent 100%);
        }
    </style>
</head>

<body>
    <!-- 步骤进度条 -->
    <div class="steps">
        <!-- 第一部分 -->
        <div class="step">
            <div class="step-progress left done">
                <div class="step-line"></div>
                <span class="step-num">1</span>
            </div>
            <div class="step-text">
                <span>选场</span>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="step">
            <div class="step-progress done">
                <div class="step-line"></div>
                <span class="step-num">2</span>
            </div>
            <div class="step-text">
                <span>选座</span>
            </div>
        </div>
        <!-- 第三部分 -->
        <div class="step">
            <div class="step-progress">
                <div class="step-line"></div>
                <span class="step-num">3</span>
            </div>
            <div class="step-text">
                <span>付款</span>
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="step">
            <div class="step-progress right">
                <div class="step-line"></div>
                <span class="step-num">4</span>
            </div>
            <div class="step-text">
                <span>观影</span>
            </div>
        </div>
    </div>
</body>

</html>