【CSS Demo】纯 CSS 打造 Flow-Steps 导航
2017-02-08 18:47
316 查看
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下:
步骤一
步骤二
步骤三
通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重新切图,这里介绍使用纯 CSS 的方法来实现 Flow-Steps 效果:
2.因 IE6 下不支持 border-color:transparent,解决方法是先将其设置为一个不常用的颜色,然后再用IE的滤镜将其透明化(Demo 中有注释)
来源:纯 CSS 打造 Flow-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 打造 Flow-Steps 面包屑导航
- 纯CSS打造Flow-Steps导航
- CSS打造很棒的黑色背景下的导航菜单
- 纯CSS打造兼容各大浏览器的底部固定悬浮导航
- 纯CSS打造漂亮的圆角边界导航
- 纯CSS打造的导航菜单(附jquery版)
- 来自Individuality纯CSS打造的笔记本样式的菜单导航
- 纯css打造绿色横向二级导航菜单代码
- JS+CSS打造简约的多级横向导航菜单
- Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单
- CSS打造导航菜单
- 纯CSS打造的导航菜单(附jquery版)
- 利用jquery动画特效和css打造的侧边弹出垂直导航
- JS+CSS打造随屏幕滚动的quick快速导航代码
- Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单
- CSS用滤镜打造的椭圆型导航菜单
- 利用jquery动画特效和css打造的侧边弹出垂直导航
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
- Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单
- Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单