<!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. Go在windows下执行命令行指令

    需要在Go写的服务里面调用命令行或者批处理,并根据返回的结果做处理. 在网上搜索了一翻,验证成功,现记录如下: cmd := exec.Command("cmd") // cmd ...

  2. python3 根据时间获取本月一号和月末日期

    一.概述 有一个统计报表需求,需要知道上个月的第一天和最后一天,来进行上个月的数据统计. 二.代码实现 #!/usr/bin/env python3 # coding: utf-8 import ca ...

  3. nginx部署angular

    官方部署教程 本文将angular官网的示例项目 heroes(英雄指南) 部署到nginx. 使用angular cli编译项目 ng build 执行完成后会生成一个 dist 目录. 服务器配置 ...

  4. Java自学-JDK环境变量配置

    JDK环境变量配置 分下载,配置,验证三个步骤进行JDK环境变量配置. 步骤 1 : 首先看配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -versi ...

  5. Unity手游汉化笔记②：使用UABE替换TTF字体

    总的笔记:https://www.cnblogs.com/guobaoxu/p/12055930.html 目录 一.分析 二.思路 三.具体实践 四.总结 Unity版本:2018.4.5f1 工具 ...

  6. 1 Dalvik和Java虚拟机

    Dalvik虚拟机特点: 1．  体积小 2．  DEX格式可执行文件,相比java运行速度快 3．  常量池采用32位索引值 4．  提供对象生命周期,堆栈,线程,权限,异常等管理 5．  Andr ...

  7. unittest管理用例生成测试报告

    #登录方法的封装 from appium import webdriver from time import sleep from python_selenium.Slide import swipe ...

  8. docker cannot stop container问题解决

    docker 容器在启动时出现异常,删除容器或者暂停容器时会出现cannot stop container 先使用sudo aa-remove-unknown ,再进行其他操作 lgj@lgj-Len ...

  9. sqlite3 FTS全文索引按照相关性排序

    PS.后来发现,以下代码并不准确.请大家不要试了. -------以下是原内容------------------------------------------------------------- ...

  10. 树莓派无显示屏连接wifi

    在烧好Raspbian系统的TF卡boot分区新建 wpa_supplicant.conf 文件,内容如下(修改自己的WIFI名和密码,key_mgmt根据路由器配置),保存后启动树莓派即可自动连接W ...