<!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. Ubuntu 18 Kubernetes集群的安装和部署 以及Helm的安装

    首先说一下我的环境, 我是在windows 10 上面建了一个ubuntu18的虚拟机,同时由于某些原因 不受网络限制, 所以安装比较顺利. Install 1.安装并启用 Docker  sudo ...

  2. HTML的attribute和DOM的property剖析（转）

    原文:https://www.jianshu.com/p/efc704d713c7 HTML attribute 与 DOM property 的对比 该文摘自angular的官方文档,老外对概念的解 ...

  3. 『7.3 NOIP模拟赛题解』

    T1 gift Description ​ 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生日礼物. ​ 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种礼物的喜 ...

  4. 独立使用 ecj

    ECJ 是 Eclipse Compiler for Java 的缩写,是 JavaTM 认可的 Java 编译工具(类似 javac).可以单独下载使用. 下载地址: http://mirrors. ...

  5. Oralce学习笔记(六)

    逻辑体系结构与Data file 逻辑体系结构关系图 逻辑体系结构最小单位BLOCK的研究 block能装多少行数据: drop table test_block_num purge; create ...

  6. rsync+inotify实现多台服务器之间数据实时同步

    配置环境 1.操作系统:CentOS6.5-X86_64 2.rsync客户端(rsync+inotify):192.168.200.82 3.rsync服务端:192.168.200.80,192. ...

  7. JS基础 —— call、apply 和 bind

    函数的三个原型方法 作用:改变this指向 call MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...

  8. excel 宏循环行数据 ，Excel统计所有sheet数据行数 VBA

    Sub fun1() '统计每一个sheet有多少行数据 Set s1 = Sheets("Sheet1") 'totalok = 0 To Sheets.Count s1.Cel ...

  9. jemeter学习-badboy录制与代理服务器录制

    一 基本元素的介绍 1. 添加测试计划 2.添加线程组 线程数---并发数,模拟多少个用户并发 Ramp-up periods ----我们要在多少秒之内进行多少用户的并发 循环次数---可以选择一次 ...

  10. Web架构之路：MongoDB集群及高可用实践

    MongoDB集群有副本集及主从复制两种模式,不过主从模式在MongoDB 3.6已经彻底废弃,今天主要探讨副本集的搭建和使用,以及分片. 副本集介绍 副本集(Replica Set)即副本的集合,在 ...