CSS响应式步骤进度指示器效果

最新推荐文章于 2024-06-20 09:40:24 发布
最新推荐文章于 2024-06-20 09:40:24 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： HTML5+CSS|CSS3 文章标签： css 响应式

Default.html

<!DOCTYPE html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>响应式步骤进度指示器</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style/ProgressIndicator.css" type="text/css" media="screen">
    <style type="text/css">
        .holder {
            margin: 5em 0;
        }
    </style>


</head>
<body>
    <h1>响应式步骤进度指示器</h1>

    <div>我们将其构建为一个很好的响应式步骤进度指示器.</div>

    <h2>简单</h2>
    <div class="holder">
        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class=""><span>步骤 3</span></li>
            <li class=""><span>步骤 4</span></li>
            <li class=""><span>步骤 5</span></li>
        </ul>
    </div>

    <h2>关注当前步骤</h2>
    <div class="holder">
        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class="complete boxed"><span>步骤 3</span></li>
            <li class=""><span>步骤 4</span></li>
        </ul>
    </div>

    <div class="holder">
        <h2>所有步骤</h2>
        <ul class="SteppedProgress">
            <li class="complete boxed"><span>步骤 1</span></li>
            <li class="complete boxed"><span>步骤 2</span></li>
            <li class="complete current"><span>步骤 3</span></li>
            <li class="boxed"><span>步骤 4</span></li>
            <li class="boxed"><span>步骤 5</span></li>
            <li class="boxed"><span>步骤 6</span></li>
        </ul>
    </div>

    <div class="holder">
        <h2>设置1到6个选项</h2>
        <ul class="SteppedProgress">
            <li><span>步骤 1</span></li>
        </ul>

        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
        </ul>

        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class=""><span>步骤 2</span></li>
            <li class=""><span>步骤 3</span></li>
        </ul>

        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class=""><span>步骤 3</span></li>
            <li class=""><span>步骤 4</span></li>
        </ul>

        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class=""><span>步骤 3</span></li>
            <li class=""><span>步骤 4</span></li>
            <li class=""><span>步骤 5</span></li>
        </ul>

        <ul class="SteppedProgress">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class="complete"><span>步骤 3</span></li>
            <li class="complete"><span>步骤 4</span></li>
            <li class="complete"><span>步骤 5</span></li>
            <li class=""><span>步骤 6</span></li>
        </ul>
    </div>


    <div class="holder">
        <h2>垂直设置</h2>
        <ul class="SteppedProgress Vertical">
            <li class="complete"><span>步骤 1</span></li>
            <li class="complete"><span>步骤 2</span></li>
            <li class="complete"><span>步骤 3</span></li>
            <li class="complete"><span>步骤 4</span></li>
            <li class="complete"><span>步骤 5</span></li>
            <li class=""><span>步骤 6</span></li>
        </ul>


        <ul class="SteppedProgress Vertical">
            <li class="complete boxed"><span>步骤 1</span></li>
            <li class="complete boxed"><span>步骤 2</span></li>
            <li class="complete boxed"><span>步骤 3</span></li>
            <li class="complete boxed"><span>步骤 4</span></li>
            <li class="complete current"><span>步骤 5</span></li>
            <li class="boxed"><span>步骤 6</span></li>
        </ul>
    </div>
</body>
</html>

ProgressIndicator.css

ul.SteppedProgress {
    counter-reset: step;
    display: flex;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.SteppedProgress li {
    list-style-type: none;
    color: #404140;
    line-height: normal;
    text-transform: uppercase;
    flex: 1;
    font-size: 22px;
    position: relative;
    padding: 0 2%;
}

    .SteppedProgress li.boxed span, .SteppedProgress li.current span {
        background: silver;
        border: 1px solid silver;
        color: gray;
        display: inline-block;
        padding: 3px 6px;
        position: relative;
        margin: 0px -6px;
        width: 100%;
    }

        .SteppedProgress li.boxed span:after, .SteppedProgress li.current span:after {
            bottom: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255,255,255,0);
            border-bottom-color: silver;
            border-width: 10px;
            margin-left: -10px;
        }

    .SteppedProgress li.current span {
        background: #4170b0;
        color: #FFF;
    }

        .SteppedProgress li.current span:after {
            border-bottom-color: #4170b0;
        }

    .SteppedProgress li.current.canHover span:hover {
        background: #b9cce5;
        border-color: #4170b0;
        color: #4170b0;
    }

        .SteppedProgress li.current.canHover span:hover:after {
            border-bottom-color: #b9cce5;
        }

    .SteppedProgress li.complete.boxed span {
        background: #23b900;
        color: #FFF;
    }

        .SteppedProgress li.complete.boxed span:after {
            border-bottom-color: #23b900;
        }

    .SteppedProgress li.complete.boxed.canHover span:hover {
        background: #95ff7c;
        border-color: #23b900;
        color: #23b900;
        cursor: pointer;
    }

        .SteppedProgress li.complete.boxed.canHover span:hover:after {
            border-bottom-color: #23b900;
            cursor: pointer;
        }

    .SteppedProgress li:before {
        content: counter(step);
        counter-increment: step;
        width: 30px;
        line-height: 30px;
        display: block;
        font-size: 22px;
        color: #FFF;
        background: gray;
        border-radius: 15px;
        margin: 0 auto 10px;
        position: relative;
        z-index: 1;
    }

    .SteppedProgress li:after {
        content: '';
        width: 100%;
        height: 6px;
        background: silver;
        position: absolute;
        left: -50%;
        top: 15px;
        z-index: -1;
    }

    .SteppedProgress li:first-child:after {
        content: none;
    }

    .SteppedProgress li.complete:before {
        background: #23b900;
        color: white;
    }

    .SteppedProgress li.complete:after {
        background: rgba(35,185,0,0.6);
    }

ul.SteppedProgress.Vertical {
    display: block;
}

.SteppedProgress.Vertical li {
    flex: none;
    clear: both;
    text-align: left;
    padding: 0;
    margin-left: 0;
    min-height: 2.2em;
}

    .SteppedProgress.Vertical li span {
        white-space: nowrap;
    }

ul.SteppedProgress.Vertical li:before {
    float: none;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    margin-left: 0;
}

.SteppedProgress.Vertical li:after {
    content: '';
    width: 6px;
    height: 100%;
    position: absolute;
    left: 12px;
    top: -50%;
    z-index: -1;
}

ul.SteppedProgress.Vertical li.boxed, ul.SteppedProgress.Vertical li.current {
    min-width: 90%;
}

    ul.SteppedProgress.Vertical li.boxed span, ul.SteppedProgress.Vertical li.current span {
        display: inline;
        margin-left: 0;
    }

        ul.SteppedProgress.Vertical li.boxed span:after, ul.SteppedProgress.Vertical li.current span:after {
            bottom: auto;
            left: auto;
            right: 100%;
            top: 7px;
            border-color: rgba(255,255,255,0);
            border-right-color: silver;
            margin: 0;
        }

        ul.SteppedProgress.Vertical li.current span:after {
            border-right-color: #4170b0;
        }

ul.SteppedProgress.Vertical li.complete.boxed span:after {
    border-color: rgba(255,255,255,0);
    border-right-color: #23b900;
}

@media (max-width: 480px) {
    ul.SteppedProgress {
        display: block;
    }

    .SteppedProgress li {
        flex: none;
        clear: both;
        text-align: left;
        padding: 0;
        margin-left: 0;
        min-height: 2.2em;
    }

        .SteppedProgress li span {
            white-space: nowrap;
        }

    ul.SteppedProgress li:before {
        float: none;
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        margin-left: 0;
    }

    .SteppedProgress li:after {
        content: '';
        width: 6px;
        height: 100%;
        position: absolute;
        left: 12px;
        top: -50%;
        z-index: -1;
    }

    ul.SteppedProgress li.boxed, ul.SteppedProgress li.current {
        min-width: 90%;
    }

        ul.SteppedProgress li.boxed span, ul.SteppedProgress li.current span {
            display: inline;
            margin-left: 0;
        }

            ul.SteppedProgress li.boxed span:after, ul.SteppedProgress li.current span:after {
                bottom: auto;
                left: auto;
                right: 100%;
                top: 7px;
                border-color: rgba(255,255,255,0);
                border-right-color: silver;
                margin: 0;
            }

            ul.SteppedProgress li.current span:after {
                border-right-color: #4170b0;
            }

    ul.SteppedProgress li.complete.boxed span:after {
        border-color: rgba(255,255,255,0);
        border-right-color: #23b900;
    }
}

运行结果如图:

这里写图片描述

这里写图片描述

.NET跨平台
关注
专栏目录
H5 jQuery响应式流程步骤进度条插件.zip
07-11
代码片段： var step1=new SetStep({ content:'.stepCont1', showBtn:false, }) var step2=new SetStep({ content:'.stepCont2', clickAble:false }) var step3=new SetStep({ content:'.stepCont3' })
step_progress_bar:这是 CSS 中的响应式水平步进进度条
05-29
步骤进度条 这是 CSS 中的响应式水平步进进度条 使用的技术 HTML5 CSS3 特征 React灵敏 如果它包含任何未命中的匹配，欢迎您更新此源代码。
推荐一款纯CSS进度指示器：CSS Progress Wizard
最新发布
gitblog_00061的博客
06-20 306
推荐一款纯CSS进度指示器：CSS Progress Wizard css-progress-wizard[NOT MAINTAINED] A pure flexbox+sass progress indicator项目地址:https://gitcode.com/gh_mirrors/cs/css-progress-wizard 1. 项目介绍 在Web开发中，进度指示器是不可或缺的元素之一，...
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
css实现进度条
weixin_63681863的博客
11-09 1534
【代码】css实现进度条。
jQuery响应式流程步骤进度条插件.zip
03-31
本压缩包包含了一个基于jQuery的响应式流程步骤进度条插件，可用于创建具有吸引力且适应不同屏幕尺寸的进度指示器。 该插件的核心特性是其响应式设计，意味着无论在桌面、平板还是手机设备上，都能自适应地展示，...
基于VUE步骤进度条样式代码
04-06
总结，创建基于Vue的响应式步骤进度条涉及以下关键点：HTML结构设计、CSS样式实现、Vue组件化开发以及响应式布局。通过结合这些技术，我们可以构建出一个既美观又实用的步骤进度条，它可以根据用户操作和屏幕尺寸...
CSS3实现分步骤进行的注册表单效果.rar
07-10
`transition`属性可以创建平滑的按钮激活效果，而`animation`则可用于在用户完成每个步骤时改变指示器的状态。为了增强视觉吸引力，可以使用`box-shadow`、`border-radius`等样式属性创建现代感十足的边框和阴影效果...
创意CSS3网站正在建设模板是一款HTML5和CSS3动画网站正在建设中响应式模板 .rar
02-19
"创意CSS3网站正在建设模板"就是这样一个利用这两项技术打造的响应式网站模板，专为那些希望在网页制作过程中展示创新与动态效果的设计师和开发者所设计。 首先，我们来深入理解HTML5。HTML5是超文本标记语言的第五...
CSS画流程进度导航引导条
周末未至
12-04 1978
一、CSS部分 /* 基本的样式 */ .progress li{ font-size: 15px; padding: 0px 20px; line-height: 40px; background: #05a5fd; display: inline-block; color: #fff; position: rela...
CSS3个人技能进度条样式代码.zip
05-24
CSS3个人技能进度条样式代码基于Bootstrap3.3.7制作，百分比进度条代码，适用于个人简历网站。
CSS实现步骤进度条——前端每日一练
qq_42544728的博客
11-16 3941
向上间隔50%的高度，由于存在自身的高度，到哪都使用该属性并不会显示居中。：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。向上移动相对自身高度的50%，和上一个属性结合可以实现垂直居中显示。：生成相对定位的元素，相对于其正常位置进行定位。的默认数值指向全局对象，浏览器就是。的数值不是由该调用设置的，因此。盒子包裹所有内容，里面划分为。但是在JavaScript中。，六个⭕分别对应着六个子。由于下面的代码并不是在。指的是当前对象的一个。call和apply。
css3实现步骤进度条
最爱喝怡宝的博客
11-28 671
使用伪类完成箭头样式步骤条： 布局部分： <body> <div class="main"> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div>
CSS竖向步骤条
weixin_33893473的博客
01-15 4823
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS竖向步骤条</title> <style type="text/css"> * { margin: ...
css表格文字超数量就竖排_CSS文字竖排 DIV CSS文字垂直竖列排版显示如何实现？...
weixin_39963341的博客
12-20 302
DIV CSS实现文字竖排排版显示兼容各大浏览器，让文字垂直竖列排版布局。有时我们需要一段文字进行从上到下竖列排版，我们知道CSS样式中有一样式可以让其竖列排版，但所有浏览器不全兼容，逼不得已放弃。但CSS5有2中方法对文字字体实现竖排显示，在接下来通过知识讲解与实例案例演示让大家中文让文字字体垂直竖排显示。实际的文字垂直竖排显示截图一、原始使用writing-mode属性-不推荐语法：writi...
css实现横向进度条和竖向进度条
weixin_33704591的博客
11-28 1358
一、横向进度条 &lt;html&gt; &lt;head&gt; &lt;title&gt;横向进度条&lt;/title&gt; &lt;style type="text/css"&gt; .loadbar { width:200px; height:25px; background-color:...
纯css实现步骤条
coldriversnow的专栏
12-05 1807
纯css写的步骤条直接上代码。
css实现竖向步骤条
weixin_30435261的博客
04-09 3005
<div class="contract-operate_recodeMain"> <ul class="contract-operate_recode_date"> <li> <span class="operate-date">...
带 HTML CSS 和 JavaScript 的步骤进度条（免费代码）
WordPress主题大全
03-20 2105
如果您想创建，那么本教程将对您有所帮助。在本文中，您将学习如何使用 Html、CSS 和 JavaScript 创建步骤进度条。早些时候我展示了许多其他类型的进度条设计，如动画进度条、圆形进度条等。我已经与您分享了带有进度条的多步骤表单的设计。这个动画步骤进度条的css制作的非常简单。那里有两个按钮可以控制步骤，它们将逐步进行。我在这个多步骤进度条 css 中使用了 4 个步骤。如果你愿意，你可以使用更多。我使用了一些 javascript 来创建这。横步进度条主要用在注册表中。
CSS响应式布局设计技巧详解
"本文主要探讨了CSS响应式布局在自适应屏幕设计中的应用和技巧，强调了响应式设计与自适应设计的区别，并分析了响应式布局的优势和在当前移动互联网环境下的重要性。" 响应式设计与自适应设计是现代网页开发中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值