技术栈

主页 > 前端开发 >

用flex布局做一个简单的物流状态线

如图效果

html

<div class="wrap">
    <div class="circle"><span>已付款</span></div>
    <div class="circle"><span>已发货</span></div>
    <div class="circle"><span>配送中</span></div>
    <div class="circle"><span>已收货</span></div>
</div>

css

         * {
            margin: 0;
            padding: 0;
        }
        .circle{
            position: relative;
            z-index: 2;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid red;
            box-sizing: border-box;            
            background: radial-gradient(red 50% , white 50%);
            white-space: nowrap;
        }
        .wrap{
            position: relative;
            margin: 100px auto 0;
            display: flex;
            width: 80%;
            justify-content: space-between;    
        }
        .wrap:before{
            position: absolute;
            top:50%;
            left: 0;
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: grey;
           
        }
        span{
            position: absolute;
            top:-20px;
            left: -10px;
            font-size: 12px;
            color: grey;
        }
责任编辑:admin  二维码分享:
本文标签: html5csshtml
点击我更换图片

评论列表