进程图html实现

最新推荐文章于 2022-03-13 20:44:54 发布

追逐春天的大孩子

最新推荐文章于 2022-03-13 20:44:54 发布

阅读量365

点赞数

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

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

版权

记录同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

效果

代码部分

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

追逐春天的大孩子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
进程图html实现

效果代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫