<!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>css步骤条</title>

    <style>

        /* 方法一 */

        .stepDiv {

            width: 1100px;

            height: 50px;

            margin: 0 auto;

        }

        .stepOne {

            width: 150px;

            font-size: 0;

            position: relative;

            float: left;

        }

        .stepOne div {

            background: #ff5837;

            width: 125px;

            height: 50px;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

            float: left;

        }

        .stepOne span {

            width: 0;

            height: 0;

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: transparent transparent transparent #ff5837;

            float: left;

        }

        .stepTwo {

            width: 150px;

            font-size: 0;

            position: relative;

            /* left: -15px; */

            float: left;

        }

        .stepTwo div {

            background: #f8f8f8;

            width: 75px;

            height: 50px;

            float: left;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

        }

        .stepTwo span:nth-of-type(1) {

            width: 0;

            height: 0;

            border-width: 25px 25px 25px 25px;

            border-style: solid;

            border-color: #f8f8f8 #f8f8f8 #f8f8f8 transparent;

            top: 0px;

            left: 0px;

            float: left;

        }

        .stepTwo span:nth-of-type(2) {

            width: 0;

            height: 0;

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: transparent transparent transparent #f8f8f8;

            float: left;

        }

        .stepThree {

            width: 150px;

            font-size: 0;

            position: relative;

            float: left;

        }

        .stepThree div {

            background: #f8f8f8;

            width: 125px;

            height: 50px;

            float: left;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

        }

        .stepThree span {

            width: 0;

            height: 0;

            border-width: 25px 0px 25px 25px;

            border-style: solid;

            border-color: #f8f8f8 #f8f8f8 #f8f8f8 transparent;

            top: 0px;

            left: 0px;

            float: left;

        }

    </style>

    <style>

        /* 方法二 */

        .stepNew {

            width: 1100px;

            height: 50px;

            margin: 50px auto;

        }

        /*  */

        .stepOneN {

            width: 150px;

            font-size: 0;

            position: relative;

            float: left;

            background: #149726;

            /* 更改此处的颜色即可完成 */

        }

        .stepOneN div {

            width: 150px;

            height: 50px;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

        }

        .stepOneN span:nth-of-type(1) {

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: #fff transparent #fff transparent;

            position: absolute;

            top: 0;

            right: 0;

        }

        /*  */

        .stepTwoN {

            width: 150px;

            font-size: 0;

            position: relative;

            float: left;

            background: #149726;

        }

        .stepTwoN div {

            width: 150px;

            height: 50px;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

        }

        .stepTwoN span:nth-of-type(1) {

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: transparent transparent transparent #fff;

            position: absolute;

            top: 0;

            left: 0;

        }

        .stepTwoN span:nth-of-type(2) {

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: #fff transparent #fff transparent;

            position: absolute;

            top: 0;

            right: 0;

        }

        /*  */

        .stepThreeN {

            width: 150px;

            font-size: 0;

            position: relative;

            float: left;

            background: #f8f8f8;

            /* 更改此处的颜色即可完成 */

        }

        .stepThreeN div {

            width: 150px;

            height: 50px;

            vertical-align: text-bottom;

            font-size: 15px;

            color: #000;

            line-height: 50px;

            text-align: center;

        }

        .stepThreeN span:nth-of-type(1) {

            border-width: 25px 0 25px 25px;

            border-style: solid;

            border-color: transparent transparent transparent #fff;

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

    <!-- <div class="stepDiv">

        <div class="stepOne">

            <div>1.第一步</div>

            <span></span>

        </div>

        <div class="stepTwo">

            <span></span>

            <div>2.第二步</div>

            <span></span>

        </div>

        <div class="stepThree">

            <span></span>

            <div>3.第三步</div>

        </div>

    </div> -->

    <!-- 方法二：推荐使用 -->

    <div class="stepNew">

        <div class="stepOneN">

            <div>1.第一步</div>

            <span></span>

        </div>

        <div class="stepTwoN">

            <span></span>

            <div>2.第二步</div>

            <span></span>

        </div>

        <div class="stepTwoN">

            <span></span>

            <div>3.第三步</div>

            <span></span>

        </div>

        <div class="stepTwoN">

            <span></span>

            <div>4.第四步</div>

            <span></span>

        </div>

        <div class="stepTwoN">

            <span></span>

            <div>5.第五步</div>

            <span></span>

        </div>

        <div class="stepThreeN">

            <span></span>

            <div>6.第六步</div>

        </div>

    </div>

    <!--

        1、样式根据实际需要调整；

        2、有多步时，直接赋值“第二步”即可，并更改文字说明；

        3、给每一步最外层增加样式即可如  style="background: blue"；

        4、自写，转载请标明出处

     -->

</body>

</html>

css实现步骤条（未封装组件）的更多相关文章

  1. css实现步骤条

    实现效果 html <ul class="steps"> <li class="active">申请完成</li> < ...

  2. element-ui Steps步骤条组件源码分析整理笔记（九）

    Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...

  3. 微信小程序 - 步骤条组件

    <!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> & ...

  4. uni-app插件ColorUI步骤条

    1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...

  5. 多步骤多分步的组件StepJump

    最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这 ...

  6. Steps 步骤条

    引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步. 基础用法 简单的步骤条. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始.需 ...

  7. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  8. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  9. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

随机推荐

  1. 类的练习3——python编程从入门到实践

    9-13 使用OrderedDict: 在练习6-4中,使用一个标准字典来表示词汇表.使用OrderedDict类来重写这个程序,并确认输出的顺序与在字典中添加的键值对的顺序一致. from coll ...

  2. Akka-CQRS（8）- CQRS Reader Actor 应用实例

    前面我们已经讨论了CQRS-Reader-Actor的基本工作原理,现在是时候在之前那个POS例子里进行实际的应用示范了. 假如我们有个业务系统也是在cassandra上的,那么reader就需要把从 ...

  3. Docker-Compose搭建单体SkyWalking 6.2

    SkyWalking简介 SkyWalking是一款高效的分布式链路追踪框架,对于处理分布式的调用链路的问题定位上有很大帮助 有以下特点: 性能好 针对单实例5000tps的应用,在全量采集的情况下, ...

  4. IP地址和MAC地址绑定的必要性

    计算机网络是一个共通的网络,世界上任何计算机都可以互相访问. 实现的原理基于网络通讯的互联网交互五层模型. 计算机网络的历史发展 当计算机网络技术初始利用的时代,几台计算机通过集线器连接,就可以实现网 ...

  5. Flink基本的API

    Flink使用 DataSet 和 DataStream 代表数据集.DateSet 用于批处理,代表数据是有限的:而 DataStream 用于流数据,代表数据是无界的.数据集中的数据是不可以变的, ...

  6. Web api 右连接

    这是原来的代码,两个表的连接的方式是inner join ,查不出我要的全部数据. 后来把代码稍稍改一下,就是left join  join into 到一个临时对象里,相当于再select from ...

  7. display:grid

    使用grid布局 参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局还没完全用利索,但这个grid布 ...

  8. Java自学-接口与继承 内部类

    Java 内部类 内部类分为四种: 非静态内部类 静态内部类 匿名类 本地类 步骤 1 : 非静态内部类 非静态内部类 BattleScore "战斗成绩" 非静态内部类可以直接在 ...

  9. kylin安装过程问题排查

    问题:日志报错:/usr/local/apps/kylin/tomcat/conf/.keystore (没有那个文件或目录) 解决:在kylin内置tomcat的server.xml中里边有个对ht ...

  10. CSRF漏洞的挖掘与利用

    0x01 CSRF的攻击原理 CSRF 百度上的意思是跨站请求伪造,其实最简单的理解我们可以这么讲,假如一个微博关注用户的一个功能,存在CSRF漏洞,那么此时黑客只需要伪造一个页面让受害者间接或者直接 ...