<ul class="ui-step list-unstyled">
<li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>填写账户名</li>
<li class="step-item current"><b class="arrow-space"></b><b class="arrow-bg"></b>验证身份</li>
<li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>设置新密码</li>
<li class="step-item">完成</li>
</ul>
less:
.ui-step(@num){
.ui-step{
position: relative;
overflow: hidden;
margin: 20px;
.step-item{
// position: relative;
float: left;
zoom:;
width: percentage(1/@num);
*width: percentage(1/@num) - 0.0416666%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #e5e5e5;
b{
float: right;
position: relative;
overflow: hidden;
width:;
height:;
border-style: solid;
_border-style: dotted dotted dotted solid;
border-color: #ccc transparent transparent transparent;
border-width: 15px;
}
.arrow-space{
border-width: 20px;
margin: -5px -35px -5px 0;
border-color: transparent transparent transparent #fff;
}
.arrow-bg{
right: -30px;
margin-left: -30px;
border-color: transparent transparent transparent #e5e5e5; }
&:first-child{
border-radius: 3px 0 0 3px;
}
&:last-child{
border-radius: 0 3px 3px 0;
}
}
.current{
z-index:;
background-color: Orange;
color: #fff;
.arrow-space{
_border-style: solid;
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fff;
}
.arrow-bg{
border-color: transparent transparent transparent Orange;
}
}
} } .ui-step(4);

无图无定位新版css步骤条兼容ie6+的更多相关文章

  1. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  2. 页面元素固定在页面底部的纯css代码(兼容IE6)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery元素分组插件,用于把一连串元素分成多组,如把多个a标签分成多组放入<li>元素中,可以用于简化多图滚动为一个元素滚动,兼容ie6

    三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置 ...

  4. css实现步骤条(未封装组件)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 基于jquery多种切换效果的焦点图(兼容ie6)

    随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...

  6. Mac系统Safari浏览器启动无图模式

    有的时候我们用热点上网,图片的出现会消耗大量的流量,这时候就需要启动无图模式不加载图片. 步骤:启动Safari浏览器->偏好设置->高级->勾选“在菜单栏中显示“开发”菜单”-&g ...

  7. (转)cacti无图无数据等常见问题排查

    推荐阅读:零基础学习Nagios http://www.51ou.com/browse/nagios/52001.htmlNagios安装配置教程 http://www.51ou.com/browse ...

  8. dedecms列表页有图调用缩略图无图留空的方法

    默认情况下,织梦的文章列表页会调用出当前栏目下的文章列表,并且调用出每个文章的缩略图:如果文章本身就有图,会调用出一张小图,如果没有,则会显示默认的织梦图片.这种处理方式有时候比较影响美观,其实可以修 ...

  9. marquee标签跑马灯连续无空白播放效果 纯CSS(chrome opera有效)

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

随机推荐

  1. java_db2错误码对应值

    DB2-SQLSTATE消息 2012-08-27 10:35:27|  分类: db2|举报|字号 订阅     本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子 ...

  2. C++ 头文件系列(iosfwd)

    简介 输入输出历来都是语言的重要部分,在C++中,该库也是占据了相当大的一部分. C++的输入输出库是其遵循面向对象设计的结果,并结合了泛型编程. 以下是这些库类的关系图(箭头标示继承,白框表示摸板, ...

  3. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  4. duilib绘制边框

    在使用Duilib时,有时候需要绘制边框,绘制边框时候,上下左右都会有边框线:可在使用时,有时候不需要绘制四边(如果绘制四边,两个有边框的控制放在一起,就有一边会很粗),那该如何处理?,其实用法很简单 ...

  5. Eval与Bind的区别

    bind和eval都是ASP.NET中的函数,而且都有对将数据获取到Html中的功能.那么,它们在使用的时候有什么区别呢?在我们编程的时候,在某种情况下,用哪个函数更加合适呢? 区别 用法: 1. b ...

  6. hibernate注解的简单应用

    注解代替了我们用的*.hbm.xml文件.简少了我们的代码量:应用简单. @Override 用途:重写父类的同名方法 单元测试注解 @Test 用途:用于测试 @Before 用途:单测方法走之前执 ...

  7. python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position 0 解决方案

    环境:mac+python 2.7 场景描述:在使用python修改excel内容修改表格内容为中文保存时报以下错误 此时已经设置了utf-8了 但保存时仍然报错错 此时将python中的中文使用un ...

  8. [UWP]附加属性1:概述

    1. 什么是附加属性(attached property ) 附加属性依赖属性的一种特殊形式,常见的Grid.Row,Canvas.Left都是附加属性. /// <summary> // ...

  9. 读书笔记 effective c++ Item 16 成对使用new和delete时要用相同的形式

    1. 一个错误释放内存的例子 下面的场景会有什么错? std::]; ... delete stringArray 一切看上去都是有序的.new匹配了一个delete.但有一些地方确实是错了.程序的行 ...

  10. Codeforces 768B Code For 1

    B. Code For 1 time limit per test:2 seconds memory limit per test:256 megabytes input:standard input ...