进度完成效果

weixin_44486632

已于 2022-08-05 10:26:42 修改

阅读量254

点赞数

分类专栏： HTML+ CSS 文章标签： css html5

于 2020-01-10 00:01:07 首次发布

本文链接：https://blog.csdn.net/weixin_44486632/article/details/103917357

版权

HTML+ CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有时候需要显示一些工作的进展情况,类似这种.
在这里插入图片描述

<!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>工作进度完成情况效果</title>
    <style>
        ul,li{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .pub-wrap{
            padding: 10px 30px;
            background-color: #d9d9d9;
        }
        .pub-title{
            text-align: center;
            font-size: 16px;
        }
        .pub-process{
            display: flex;
            position: relative;
            height: 35px;
            width: 100%;
            margin-top: 10px;
        }
        .pub-process::after{
            content: '';
            position: absolute;
            height: 4px;                   
            top: 50%;
            transform: translateY(-50%);
            background-color: #c2c2c2;
            width: 98%;
            left: 0;
        }
        li{
            position: relative;
            height: 35px;
            flex: 1;
        }
        .pub-process li:nth-child(1){
            position: absolute;
            width: 35px;
            left: 0;
            top: 0;
            z-index: 5;
        }
        li .ball{
            width: 35px;
            height: 35px;
            border-radius: 35px;
            background-color: #c2c2c2;
            z-index: 5;
            position: absolute;
            right: 0;
            line-height: 35px;
            text-align: center;
            color: #fff;
        }
        .active .ball{
            background-color: green;
        }
        .active + .active::after{
            content: '';
            position: absolute;
            height: 4px;                   
            top: 50%;
            z-index: 3;
            transform: translateY(-50%);
            background-color: green;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="pub-wrap">
        <div class="pub-title">工作进度完成情况效果</div>
        <ul class="pub-process">
            <li class="active">
                <span class="ball">1天</span>
            </li>
            <li class="active">
                <span class="ball">2天</span>
            </li>
            <li class="active">
                <span class="ball">3天</span>
            </li>
            <li>
                <span class="ball">4天</span>
            </li>
            <li>
                <span class="ball">5天</span>
            </li>
        </ul>
    </div>
</body>
</html>

参考的文章实在是找不到了,上面的是我个人写的简单版,这里我有复制参考文章的代码,供你参考,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<style>
    ul {
  margin:0;
  padding:0;
}
li {
  list-style: none;
}

.pub-wrap {
  position: relative;
  padding: 0 30px 10px;
  margin-top: 28px;
  border-radius: 6px;
  background-color: #edf2f2;
}

.pub-title {
  padding-top: 14px;
  margin-right: -20px;
  margin-left: -20px;
  font-size: 1.1875rem;
  text-align: center;
}

.pub-process {
  position: relative;
  height: 35px;
  margin-top: 28px;
  margin-left: 35px;
  font-size: 0;
  color: #fff;
}

.pub-process:after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 99%;
  height: 4px;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: #d9d9d9;
}

.pub-process li {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 25%;
  height: 35px;
  font-size: .875rem;
}

.pub-process li:first-child {
  width: 35px;
  margin-left: -35px;
}

.pub-process .ball {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 7;
  width: 35px;
  height: 35px;
  line-height: 35px;
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: #d9d9d9;
}

.pub-process .active .ball {
  background-color: #11c2c2;
}

.pub-process .active + .active:after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 4px;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: #11c2c2;
}

.process-3 li {
  width: 50%;
}

.process-5 li {
  width: 25%;
}


/* flex ver */
.pub-process-flex {
  display: -webkit-box;
}
.pub-process-flex li {
  display: list-item;
  -webkit-box-flex: 1;
  width: auto;
}
.pub-process-flex li:first-child {
  width: 35px;
  margin-left: -35px;
  -webkit-box-flex: 0;
}
</style>
<body>
  <div class="pub-wrap">
    <div class="pub-title" id="pubTitle">在群内累计布置3天作业，即可加入先锋教师！</div>
    <ul class="pub-process process-5" id="pubProcess">
      <li class="active"><span class="ball">1天</span></li>
      <li class="active"><span class="ball">1天</span></li>
      <li><span class="ball">1天</span></li>
      <li><span class="ball">1天</span></li>
      <li><span class="ball">1天</span></li>
    </ul>
  </div>
  
  <!-- flex版本 -->
  <div class="pub-wrap">
    <div class="pub-title" id="pubTitle">在群内累计布置3天作业，即可加入先锋教师！</div>
    <ul class="pub-process process-5 pub-process-flex" id="pubProcess">
      <li class="active"><span class="ball">1天</span></li>
      <li class="active"><span class="ball">1天</span></li>
      <li class="active"><span class="ball">1天</span></li>
      <li><span class="ball">1天</span></li>
      <li><span class="ball">1天</span></li>
    </ul>
  </div>
</body>
</html>

weixin_44486632

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度完成效果

有时候需要显示一些工作的进展情况,类似这种,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫