<!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. Django框架之DRF 认证组件源码分析、权限组件源码分析、频率组件源码分析

    认证组件 权限组件 频率组件

  2. [译] Go语言测试进阶版建议与技巧

    阅读本篇文章前,你最好已经知道如何写基本的单元测试.本篇文章共包含3个小建议,以及7个小技巧. 建议一,不要使用框架 Go语言自身已经有一个非常棒的测试框架,它允许你使用Go编写测试代码,不需要再额外 ...

  3. Scala 函数基础入门

    函数的定义与调用 在Scala中定义函数时,需要定义函数的函数名.参数.函数体. 我们的第一个函数如下所示: def sayHello(name: String, age: Int) = { if ( ...

  4. 9. Scala隐式转换和隐式值

    9.1 隐式转换 9.1.1 提出问题 先看一个案例演示,引出隐式转换的实际需要=>指定某些数据类型的相互转化 object boke_demo01 { def main(args: Array ...

  5. AnyProxy代理

    背景:当一个公司测试团队有多个人的时候,只需搭建一个AnyProxy服务,其它小伙伴浏览器上打开AnyProxy页面,手机上设置代理就能抓到http.https请求了.解决了部分人电脑不正经的小伙伴f ...

  6. Linux ssh 公私钥配置

    Linux ssh 公私钥配置 ssh 公私钥可实现无密码的情况下直接直接登录到服务端.方便我们管理,而且也可以设置ssh完全通过公私钥登录,不可通过密码登录,来提高我们的服务器安全程度. 配置 生成 ...

  7. Java基础扫盲系列（二）—— Java中BigDecimal和浮点类型

    一直以来我几乎未使用过BigDecimal类型,只有在DB中涉及到金额字段时听说要用Decimal类型,但是今天再项目代码中看到使用BigDecimal表示贷款金额. 本篇文章不是介绍BigDecim ...

  8. IntelliJ IDEA启动一个普通的java web项目的配置

    文:朱季谦 这是我很久以前刚开始用IntelliJ IDEA时记录的笔记,正好赶上最近离职了,可以有比较多的时间把以前的记录整理一下,可以让刚接触到IntelliJ IDEA的童鞋学习如何在Intel ...

  9. laravel5.4 orm with 用法

    在laravel orm 中一个with 关联方法,需要在模板中先定义表与表之间的关系 /*一对多的关系 */ public function hasManyTemplate(){ return $t ...

  10. ThreadLocal定义、使用案例及源码分析

    原文连接:(http://www.studyshare.cn/blog/details/1165/0 ) 一.ThreadLocal定义 jdk官方文档定义是:该类提供线程局部变量. 这些变量与其正常 ...