Maison > Article > interface Web > Code d'implémentation de la barre de progression en plusieurs étapes css+div

Code d'implémentation de la barre de progression en plusieurs étapes css+div

不言original: 2018-06-28 13:58:061678parcourir

Cet article présente principalement le principe de mise en œuvre et le code de la barre de progression en plusieurs étapes, qui a une bonne valeur de référence. Jetons un coup d'oeil ci-dessous

Aujourd'hui, j'ai écrit un code pour une barre de progression en plusieurs étapes au travail et j'aimerais le partager avec vous !

Rendu :

Affichage du code :

<!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://7xnlea.com2.z0.glb.qiniucdn.com/stepbg.png) 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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Effet de coin arrondi CSS abstrait implémenté avec jsArticle suivant：Effet de coin arrondi CSS abstrait implémenté avec js

Articles Liés

Voir plus