js步骤条

最新推荐文章于 2024-11-01 06:30:00 发布

大湿骑码

最新推荐文章于 2024-11-01 06:30:00 发布

阅读量898

点赞数

分类专栏： html css 文章标签： javascript css css3

本文链接：https://blog.youkuaiyun.com/yqlnihao/article/details/122325856

版权

html 同时被 2 个专栏收录

19 篇文章

订阅专栏

css

7 篇文章

订阅专栏

css+html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix {
            zoom: 1;

        }

        .clearfix:after {
            content: ".";

            display: block;

            clear: both;

            visibility: hidden;

            font-size: 0;

            height: 0;

            line-height: 0;

        }

        .lhh40 {
            line-height: 40px;
            height: 40px;

        }
        .fl, .floatl{float:left;}

        .fs16{font-size: 16px;}

        .c_fff{color: #fff;}

        .textc,.tc{text-align: center;}

        .typo_bold{font-weight: bold;}
        .stepItem{
            background: #BEBEBE;

            box-sizing: border-box;

            position: relative;

        }

        /* 为步骤数字添加样式 */

        .stepItem i{
            width: 25px;

            height: 25px;

            display: inline-block;

            border-radius: 50%;

            background-color: #fff;

            transform: scale(0.8,0.8);

            -ms-transform:scale(7deg);  /* IE 9 */

            -moz-transform:scale(7deg);   /* Firefox */

            -webkit-transform:scale(7deg); /* Safari 和 Chrome */

            -o-transform:scale(7deg);   /* Opera */

            font-weight: bold;

            color: #BEBEBE;

        }

        /* 为每个步骤末尾加灰色三角形和白色边框 */

        .stepItem::after{
            content: "";

            border: 2px solid #fff;

            border-bottom: none;

            border-left: none;

            background-color: #BEBEBE;

            height: 30px;

            width: 27px;

            position: absolute;

            display: block;

            top: 5px;

            right: -15px;

            z-index: 10;

            transform:rotate(45deg);

            -ms-transform:rotate(45deg);  /* IE 9 */

            -moz-transform:rotate(45deg);   /* Firefox */

            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */

            -o-transform:rotate(45deg);   /* Opera */

        }

        /* 当前步骤加绿色三角形和白色边框 */

        .stepBox .active:after {
            background-color: #00D2C3;

            content: "";

            border: 2px solid #fff;

            border-bottom: none;

            border-left: none;

            height: 28px;

            width: 27px;

            position: absolute;

            display: block;

            top: 5px;

            right: -15px;

            z-index: 10;

            transform:rotate(45deg);

            -ms-transform:rotate(45deg);  /* IE 9 */

            -moz-transform:rotate(45deg);   /* Firefox */

            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */

            -o-transform:rotate(45deg);   /* Opera */

        }

        /* 当前步骤中的样式修改 */

        .stepBox .active {
            background-color: #00D2C3;

        }

        .stepBox .active i{
            color: #00D2C3;

        }

        /* 取消最后一项所有的after伪类 */

        .stepItem:last-child::after{
            content: "";

            border: none;

            height: 0;

            width: 0;

            z-index: 11;

        }
    </style>
</head>
<body>
<div class="stepBox clearfix lhh40 mt40">
    <div class="stepItem fl fs16 c_fff textc lhh40 " style="width: 200px;">
        <span class="c_fff typo_bold">买家申请售后</span>
    </div>
    <div class="stepItem fl fs16 c_fff textc lhh40 active" style="width: 200px;">
        <span class="c_fff typo_bold">卖家处理退款申请</span>
    </div>
    <div class="stepItem fl fs16 c_fff textc lhh40" style="width: 200px;">
        <span class="c_fff typo_bold">卖家处理退款申请</span>
    </div>
    <div class="stepItem fl fs16 c_fff textc lhh40" style="width: 200px;">
        <span class="c_fff typo_bold">退款完毕</span>

    </div>

</div>
</body>
</html>