zoukankan      html  css  js  c++  java
  • html5 流程条

    <html>
    <head>
    <title>progress</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
    /*订单进度条*/
    .progress-x{
    80%;
    height: 40px;
    position: relative;
    margin: 10px auto;
    }
    .progress-x div{
    100%;
    height: 5px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-2px;
    border:1px solid #ddd;
    background: #ccc;
    }
    .progress-x div span{
    position: absolute;
    display: inline-block;
    background:#71e0b0;
    height: 4px;
    }
    .progress-x>span{
    position: absolute;
    top:0;
    40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    margin-left: -20px;
    color:#fff;
    background: #ccc
    }
    .progress-x>span:nth-child(1){
    left: 0%;
    }
    .progress-x>span:nth-child(2){
    left: 25%;
    }
    .progress-x>span:nth-child(3){
    left: 50%;
    }
    .progress-x>span:nth-child(4){
    left: 75%;
    }
    .progress-x>span:nth-child(5){
    left: 100%;
    }
    </style>
    </head>
    <body>
    <div class="progress-x">
    <!-- 进度条 -->
    <div>
    <span width="75%"></span>
    </div>
    <!-- 五个圆 -->
    <span>准备</span>
    <span>开始</span>
    <span>进行中</span>
    <span>待完成</span>
    <span>已完成</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    2020软件工程作业02
    自我介绍
    Requests的使用
    爬虫基本原理
    2019春总结作业
    十二周作业
    十一周作业
    第十周作业
    intellij idea 的全局搜索快捷键方法
    Oracle多表关联
  • 原文地址:https://www.cnblogs.com/a-long/p/5821007.html
Copyright © 2011-2022 走看看