【CSS Demo】纯 CSS 打造 Flow-Steps 导航
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 Demo】纯 CSS 打造 Flow-Steps 导航的更多相关文章
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- 【css】纯css实现文字循环滚动效果
不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 瀑布流的实现纯CSS实现Jquery实现
瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...
- 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 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- 步步为营-23-通过GridView实现增删改
说明:把xml中的数据放入到数据源list中然后显示到gridview中,参考上一节内容 1 UI页面 2创建student类 public class Student { public int ID ...
- DBMS_OUTPUT包学习
DBMS_OUTPUT包中的其他方法和函数的用法,所以这次特地来研究一下. 先简单的讲解一下这个包的所有procedure的含义及作用: ----------------------- 1. ...
- 《剑指offer》-连续子数组的最大和
题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...
- LeetCode 4. Median of Two Sorted Arrays (分治)
两个有序的数组 nums1 和 nums2 维数分别为m,n.找所有数的中位数,复杂度 O(log (m+n)) 注意:奇偶个数,分治法求解,递归出口特殊处理.取Kth smallest数时,分治取m ...
- jQuery动态设置样式（style、css）
一.jQuery设置css样式 <div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获 ...
- PHP 数组中取出随机取出指定数量子值集
#关键:array_rand() 函数返回数组中的随机键名,或者如果您规定函数返回不只一个键名,则返回包含随机键名的数组.#思路:先使用array_rand()随机取出所需数量键名,然后将这些键名指向 ...
- BZOJ3064 Tyvj 1518 CPU监控 线段树
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3064 题意概括 一个序列,要你支持以下操作: 1. 区间询问最大值 2. 区间询问历史最大值 3. ...
- 066 linux下时间的修改
1.关于时间的修改,在linux还是很重要的,在这里只是介绍一个简单的常用的命令,并且时间不会写入到系统. 2.命令 3.如果想把时间写进系统 修改完成之后,输入clock -w 时间将会被写进CMO ...
- 初探kafka
日常中工作中我并没有对kafka接触很多,但了解到很多的框架都和kafka有着紧密的关系.比如rockmetmq是参考了kafka的设计,neflix的缓存组件ehcache是用kafka做数据的同步 ...
- Angular 个人深究（五）【外部包引用 Leaflet 简单实用】
Leaflet 使用 最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下. 介绍: Leaflet 是一个为移动设备设计的交互式地图的 ...