鍍金池/ 問答/HTML5  HTML/ html+css這種條裝該怎么寫

html+css這種條裝該怎么寫

clipboard.png

回答
編輯回答
巫婆

1、通過圖片，將不同狀態(tài)的效果分成不同的圖片。
2、div+css也可以實現(xiàn)類似的效果。

2017年9月10日 08:34
編輯回答
女流氓

這種屬于步驟條了吧。
好久沒寫樣式了，花了三分鐘搞了下，不推薦用圖片的方式。

<!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>
    .step{
        /* background-color: azure; */
        height: 100px;
        margin-top: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .step-circle{
        width: 58px;
        height: 58px;
        border-radius: 30px;
        background-color: #f0f3f5;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        position: relative;
    }
    .step-circle::before{
        content: "";
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: 48px;
        height: 48px;
        /* background-color: #495a75; */
        background-color: #fff;
        border-radius: 48px;
    }
    .step-circle>span{
        position: relative;
        z-index: 2;
        color: #495a75;
    }
    .between{
        width: 428px;
        height: 18px;
        background-color: #f0f3f5;
        margin: 0 -3px;
    }
    .currnet>span{
        color: #5dbcac;
    }
    .currnet::before{
        background-color: #495a75;
    }
    </style>
</head>
<body>
    <div class="step">
        <div class="step-circle currnet">
            <span>1</span>
        </div>
        <div class="between"></div>
        <div class="step-circle">
            <span>2</span>
        </div>
        <div class="between"></div>
        <div class="step-circle">
            <span>3</span>
        </div>
    </div>
</body>
</html>
2017年2月13日 06:07