low-Steps 导航效果常用于需要表示执行步骤的交互页面，效果如下：

通常使用图片来实现 Flow-Steps 效果，但此方法的灵活性不足，当内容变化较大时就可能需要重新切图，这里介绍使用纯 CSS 的方法来实现 Flow-Steps 效果：

兼容版本

此版本兼容主流的浏览器（IE6、7、8… FF、chrome），但也因此导致 HTML 结构比较复杂，并且使用了 IE 的滤镜，Demo 如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS flow-steps/crumbs</title>

<style type="text/css">

*{ margin:0; padding:0;}

.wrapper{ padding:20px;}

.flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}

    .flow-steps li{ float:left; height:30px; margin-right:-32px; background:#d7d7d7; line-height:30px; overflow:hidden;}

    .flow-steps a{ display:block; float:left; width:80px; padding: 0 18px 0 0; text-align:center; color:#333; text-decoration:none;}

    .flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;}

    .flow-steps s{ position:relative; float:left; width:0px; height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/ _border-color:snow; _filter:chroma(color=snow);/*For IE6*/ border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;}

    .flow-steps .on{ background:#ff6600;}

    .flow-steps .on a{ color:#fff;}

    .flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; }

    .flow-steps .on s{ border-left-color:#ff6600;}

    .flow-steps .f{ border-color:#d7d7d7!important;}

</style>

</head>

<body>

<div class="wrapper">

    <ul class="flow-steps">

        <li><b class="f"></b><a href="#">步骤一</a><s></s></li>

        <li class="on"><b></b><a href="#">步骤二</a><s></s></li>

        <li><b></b><a href="#">步骤三</a><s></s></li>

        <li><b></b><a href="#">iinterest.net</a><s></s></li>

    </ul>

</div>

</body>

</html>

两点必要的说明：

1.三角箭头效果是用 border 实现的

2.因 IE6 下不支持 border-color:transparent，解决方法是先将其设置为一个不常用的颜色，然后再用IE的滤镜将其透明化（Demo 中有注释）

CSS3 版本

使用了 CSS3 的版本，HTML 代码就要简洁很多，因为使用了伪元素来替代一些无意义的标签，同时也实现 :hover 效果，缺点就是不兼容 IE6。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS flow-steps/crumbs</title>

<style type="text/css">

*{ margin:0; padding:0;}

.wrapper{ padding:20px;}

.flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}

    .flow-steps li{ float:left; margin-right:-28px;}

    .flow-steps a{ display:block; float:left; width:170px; min-width:150px; height:30px; background:#d7d7d7; color:#333; line-height:30px; text-align:center; text-decoration:none;}

    .flow-steps a:before{ content:""; display:block; float:left; width:0; height:0px; margin-top:-6px; border:21px solid transparent; border-left-color:#fff;}

    .flow-steps a:after{ content:""; position:relative; display:block; float:right; width:0; height:0px; margin:0 -1px 0 10px; border:15px solid transparent; border-left-color:#d7d7d7;}

    .flow-steps li:first-child a:before{ border:12px solid #d7d7d7;}

    .flow-steps li:last-child a:after{ border:8px solid #d7d7d7; margin-right:0;}

    .flow-steps .on a{ background:#ff6600; color:#fff;}

    .flow-steps .on a:after{ border-left-color:#ff6600;}

    .flow-steps li.on:first-child a:before{ border-color:#ff6600;}

    .flow-steps li:hover a{ background:#ff6600; color:#fff;}

    .flow-steps li:hover a:after{ border-left-color:#ff6600;}

    .flow-steps li:first-child:hover a:before{ border-color:#ff6600;}

    .flow-steps li:last-child:hover a:after{ border-color:#ff6600;}

</style>

</head>

<body>

<div class="wrapper">

    <ul class="flow-steps">

        <li><a href="#">步骤一</a></li>

        <li><a href="#">步骤二</a></li>

        <li class="on"><a href="#">步骤三</a></li>

        <li><a href="#">iinterest.net</a></li>

    </ul>

    <div class="arr"></div>

</div>

</body>

</html>

来源：纯 CSS 打造 Flow-Steps 导航

【CSS Demo】纯 CSS 打造 Flow-Steps 导航的更多相关文章

  1. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  2. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  3. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  4. 【css】纯css实现文字循环滚动效果

    不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...

  5. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 瀑布流的实现纯CSS实现Jquery实现

    瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...

  8. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  9. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 委托Func和Action【转】

    平时我们如果要用到委托一般都是先声明一个委托类型,比如: private delegate string Say(); string说明适用于这个委托的方法的返回类型是string类型,委托名Say后 ...

  2. Javascript事件设计模式（七）

    一:事件设计概述 事件机制可以使程序逻辑更加符合现实世界,在JavaScript中很多对象都有自己的事件,例如按钮就有onclick事件,下拉列表框就有 onchange事件,通过这些事件可以方便编程 ...

  3. SG 大法（Sprague-Grundy函数）

    SG函数的定义: g(x) = mex ( sg(y) |y是x的后继结点 ) 其中mex(x)(x是一个自然是集合)函数是x关于自然数集合的补集中的最小值,比如x={0,1,2,4,6} 则mex( ...

  4. hdu 3405 删掉某点后 求最小生成树

    给出N个点的坐标 边的权值为两点间的距离 删掉其中某点 求最小生成树的权值和 要求这权值最小 因为最多50个点 所以具体是删哪个点 用枚举假如有4个点 就要求4次最小生成树 分别是2 3 4 | 1 ...

  5. c++ primer 笔记 （四）

    现代C++程序应尽量使用vector和迭代器类型,而避免使用低级的数组和指针. 设计良好的程序只有在强调速度时才在类实现的内部实现数组和指针.   更多地使用vector来取代数组,数组被严格限制于程 ...

  6. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  7. Ancient Printer

    为找规律题  结果为   节点数*2-最长字段+字段个数 结点不能设置为0   与判断条件相冲突 #include<bits/stdc++.h> using namespace std; ...

  8. C++ 对Ctrl+Z的解释

    只有当Ctrl+Z单独位于一行的行首时,才表示输入的终止!(即无论何时,都推荐先回车,再Ctrl+Z,再回车结束输入) 当Ctrl+Z位于行中.行末时,输入都不会结束. (Ctrl+Z表示一个字符,其 ...

  9. sublime 自定义快捷代码

    选择打开tools ->developer->new snippet <snippet> <content><![CDATA[Hello, ${1:this} ...

  10. P1510 精卫填海

    P1510 精卫填海二分答案二分背包容量,判断能否满足v.判断的话就跑01背包就好了. #include<iostream> #include<cstdio> #include ...