zoukankan      html  css  js  c++  java
  • CSS 步骤进度条

    .wizard { margin: 0; padding: 0; overflow: hidden; font-size: 0; }
    
        .wizard li { font-size: 14px; list-style-type: none; display: inline-block; position: relative; margin: 0; padding: 0; text-align: center; line-height: 30px; height: 30px; background-color: #C3C3C3; }
            .wizard li > span { display: block; color: #FFFFFF; font-weight: bold; text-transform: uppercase; width: 150px; }
    
            .wizard li.done > span { color: #FFFFFF; background-color: #3c8dbc; }
            .wizard li > span::after,
            .wizard li > span::before { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: #C3C3C3; border-width: 15px; }
    
            .wizard li > span::after { top: -5px; z-index: 1; border-left-color: white; border-width: 20px; }
    
            .wizard li > span::before { z-index: 2; }
            .wizard li.done + li > span::before { border-left-color: #3c8dbc; }
    
            .wizard li:first-child > span::after,
            .wizard li:first-child > span::before { display: none; }
            .wizard li:first-child i { display: block; height: 0; width: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-width: 15px; }
            .wizard li:last-child i { display: block; height: 0; width: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: white; border-width: 15px; }
    
            .wizard li:last-child i { left: auto; right: -15px; border-left-color: transparent; }
    <ul class="wizard">
        <li class="done"><span>申请</span><i></i></li>
        <li class="done"><span>申请</span><i></i></li>
        <li class="done"><span>申请</span><i></i></li>
        <li class="done"><span>申请</span><i></i></li>
        <li class="done"><span>申请</span><i></i></li>
        <li class="done"><span>申请</span><i></i></li>
        <li><span>申请</span><i></i></li>
        <li><span>申请</span><i></i></li>
        <li><span>申请</span><i></i></li>
    </ul>
  • 相关阅读:
    HttpClient调用RestFul接口(post和get方式)
    mysql权限异常
    javascript:用法
    Java哈希值HashCode理解
    Java的CountDownLatch和CyclicBarrier的理解和区别
    Java并发编程与技术内幕:ThreadGroup线程组应用
    面试官: 谈谈什么是守护线程以及作用 ?
    java 成员变量 静态成员变量 方法 静态方法初始化顺序
    【java并发核心一】Semaphore 的使用思路
    threadlocal原理及常用应用场景
  • 原文地址:https://www.cnblogs.com/Robbery/p/CSS_WIZARD.html
Copyright © 2011-2022 走看看