<!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. 算法设计与分析(李春保)练习题答案v1

    1.1第1 章─概论 1.1.1练习题 1.下列关于算法的说法中正确的有(). Ⅰ.求解某一类问题的算法是唯一的 Ⅱ.算法必须在有限步操作之后停止 Ⅲ.算法的每一步操作必须是明确的,不能有歧义或含义模 ...

  2. Linux ssh 公私钥配置

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

  3. 【java】java删除文件delete和deleteOnExit 方法的区别，为什么调用deleteOnExit无效？

    delete() 是即刻删除 public boolean delete() { SecurityManager security = System.getSecurityManager(); if ...

  4. 《PHP7底层设计与源码实现》学习笔记2——结构体对齐

    书里给了一段代码,假如有个结构体如下: struct test {     char a;     int b;     long c;     void* d;     int e;     cha ...

  5. Kafka学习笔记之如何永久删除Kafka的Topic

    0x00 问题描述 使用kafka-topics --delete命令删除topic时并没有真正的删除,而是把topic标记为:“marked for deletion”,导致重新创建相同名称的Top ...

  6. MVC伪静态路由简单搭配

      public static void RegisterRoutes(RouteCollection routes)         {             routes.IgnoreRoute ...

  7. C#利用控件mscomm32.ocx读取串口datalogic扫描枪数据

    1).开发环境VS12,语言C# 2).扫描枪品牌:datalogic 4470 3).通讯协议:串口 1.首先,第一步创建一个新工程,windows窗体应用程序,命名为TestScanner,如下: ...

  8. Ubuntu系统下搭建docke

    linux内核版本依赖 kernel version >= 3.8 可以使用如下命令查看 uname -a | awk '{split($3, arr, "-"); prin ...

  9. 第一阶段：Java基础 1.JAVA开发介绍---6. Java基本数据类型

    Java 的两大数据类型: 内置数据类型(基本数据类型) 引用数据类型 本数据类型: Java语言提供了八种基本类型.六种数字类型,一种字符类型,还有一种布尔型. byte,short,int,lon ...

  10. python递归函数的执行过程

    举例: def nove(n,a,b,c): if n == 1: print(a,'------------>',c) else: nove(n-1,a,c,b) nove(1,a,b,c) ...