Home > Article > Web Front-end > Implementation principle of CSS3 multi-step progress bar (with code)

Implementation principle of CSS3 multi-step progress bar (with code)

高洛峰Original: 2018-05-15 11:30:365996browse

This article mainly introduces the implementation principle of CSS3 multi-step progress bar (with code), which has a good reference value. Let’s take a look at it with the editor

I wrote a code for a multi-step progress bar at work today, and I would like to share it with you!

Rendering:

Implementation principle of CSS3 multi-step progress bar (with code)

Code display:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>step</title>
</head>
<style>
    ul,li{list-style:none;}
    .flow_steps{height:55px;width:1000px;margin:100px  auto;}
    .flow_steps .steps{padding-left:0;}
    .flow_steps ul li { float:left; height:55px; padding:0 70px 0 50px; line-height:55px; text-align:center; background:url(http://www.php.cn/) no-repeat 100% 0 #E4E4E4;font-family: "microsoft yahei";color:#6C6C6C;}
    .flow_steps ul li.done { background-position:100% 0px; background-color:#E1E1E1;}
    .flow_steps ul li.current_prev { background-position:100% -55px; background-color:#E1E1E1;}
    .flow_steps ul li.current { color:#fff; background-color:#DD4D3C;}
    .flow_steps ul li.last { background-image:none;}
    .flow_steps ul li.first { border-radius:10px 0 0 10px; }
    .flow_steps ul li.last { border-radius:0 10px 10px 0; }
</style>
<body>
<p class="flow_steps clearfix">
    <ul class="clearfix steps">
        <li class=" done first current_prev ">
            第一步
        </li>
        <li class=" current">
            第二步
        </li>
        <li class=" ">
            第三步
        </li>
        <li class=" last">
            第四步
        </li>
    </ul>
</p>
</body>
</html>

The above is the detailed content of Implementation principle of CSS3 multi-step progress bar (with code). For more information, please follow other related articles on the PHP Chinese website!

css3

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share an example method of setting the 3D transformation distance using the perspective attribute of CSS3Next article：Share an example method of setting the 3D transformation distance using the perspective attribute of CSS3

See more

Implementation principle of CSS3 multi-step progress bar (with code)

Related articles