【任务十的进度条如何实现，以及进度条点击时的效果】

任务十的进度条如何实现，以及进度条点击时的效果

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(5)

详细描述

截图

代码

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

编辑于2025-04-01

时间排序

热门排序

[真传弟子]JS-江吉仪
0

我是使用的栅格布局实现的，加上一个hover效果，一个圆形，圆形里面有数字，下面div一个边框，固定定位到圆形中间就好。

查看全部>

编辑于2018-08-31
[西安|荣耀师兄]UI-阮少凡
0

用flex布局也可以实现，四个div盒子，每个里面包含三个小的div，创建一个空心圆，使用margin赋值，使空心圆覆盖在上一个div进度条上，自己调整，达到预期的标准，最后再给四个大div添加hover就可以了

查看全部>

编辑于2018-12-22
[成都|]JS-
0

点击效果可以用hover来做，然后后面的横杠可以用伪元素来做

查看全部>

编辑于2019-03-18
[无名弟子]QA-张杰
0

好想可以用伪元素在圆的两边设置两个边框或者用定位做出一样的效果. 然后在用hover效果

查看全部>

编辑于2019-06-26
[无名弟子]粟帅斌
0

一个lable套3个div；一个做横线；一个做圆给个定位；一个输文字；搞定；input加lable关联起来ok

查看全部>

编辑于2019-09-11

去第页