进程图html实现

最新推荐文章于 2022-03-18 23:52:27 发布

追逐春天的大孩子

最新推荐文章于 2022-03-18 23:52:27 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

分类专栏： it 记录文章标签：进程图

本文链接：https://blog.csdn.net/weixin_43709908/article/details/103311318

记录同时被 2 个专栏收录

45 篇文章

订阅专栏

37 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个清晰的三步骤注册流程界面，包括用户注册、企业信息填写及开始使用三个阶段，通过不同的颜色和布局区分各步骤状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          
          .stepRegister {
            overflow: hidden;
            margin-bottom: 4%;
        }
        
        .stepRegister .first,
        .stepRegister .third {
            width: 33%;
            float: left;
            text-align: center;
            position: relative;
        }
        
        .stepRegister .second {
            width: 34%;
            float: left;
            text-align: center;
            position: relative;
        }
        
        .stepRegister .first .number,
        .stepRegister .second .number,
        .stepRegister .third .number {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: #005bab;
            color: #fff;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        
        .stepRegister .third .number {
            background-color: #9B9B9B;
        }
        
        .stepRegister .first .retail,
        .stepRegister .second .retail {
            font-size: 14px;
        }
        
        .stepRegister .third .retail {
            font-size: 14px;
            color: #9B9B9B;
        }
        
        .stepRegister .first .right-line {
            width: 46%;
            height: 2px;
            position: absolute;
            background: red;

            top: 18%;
            right: 0;
        }
        
        .stepRegister .second .left-line {
            width: 46%;
            height: 2px;
            position: absolute;
            background: red;
            top: 18%;
            left: 0;
        }
        
        .stepRegister .second .right-line {
            width: 46%;
            height: 2px;
            position: absolute;
            /* 小线条的颜色 */
            background: red;

            top: 18%;
            right: 0;
        }
        
        .stepRegister .third .left-line {
            width: 46%;
            height: 2px;
            background-color: #9B9B9B;
            position: absolute;
            top: 18%;
            left: 0;
        }
        
        .mui-bar {
            background-color: #fff;
            border: none;
            outline: none;
            box-shadow: none;
            margin-bottom: 20px;
        }
        
        .mui-bar-tab img {
            width: 36%;
        }
    </style>
</head>
<body>
      <!-- 三步 -->
      <section class="stepRegister">
        <div class="first">
            <div class="number">1</div>
            <div class="retail star">用户注册</div>
            <div class="right-line"></div>
        </div>

        <div class="second">
            <div class="left-line"></div>
            <div class="number">2</div>
            <div class="retail star">企业信息</div>
            <div class="right-line"></div>
        </div>

        <div class="third">
            <div class="left-line"></div>
            <div class="number">3</div>
            <div class="retail">开始使用</div>
        </div>
    </section>
</body>
</html>