<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. The type or namespace name '****' could not be found

    偶尔会在编译时出现“The type or namespace name '****' could not be found (are you missing a using directive or ...

  2. Java语言开发环境搭建

    在使用任何计算机语言开发之前,都要搭建其开发环境. 一.明确什么是JDK.JRE. 二.下载JDK 三.安装JDK 四.配置环境变量 五.验证是否成功 一.什么是JRE.JDK. JRE(Java R ...

  3. Angular企业级开发(7)-MVC之控制器

    1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...

  4. 架设WIN32汇编程序的开发环境

    笔者在学习Windows下的图形界面应用程序(GUI,Graphical User Interface)的时候碰到的第一个麻烦就是架设WIN32汇编程序的开发环境,在这里笔者愿意和大家分享这段经历. ...

  5. Redis服务器搭建

    下载并解压redis,然后进入redis所在目录   编译安装             make && make install   启动redis 服务 (加上&表示在后台运 ...

  6. NFS安装及配置

    NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系统能够彼此分享个 ...

  7. 【openstack N版】——认证服务keystone

    一. 基础环境 1.1环境介绍 linux-node1(控制节点) #系统版本 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux r ...

  8. 做推送,怎么能不了解推送的 4 种消息形式呢?(iOS 篇)

    极光推送是为 App 提供第三方推送服务的平台之一,它提供四种消息形式:通知,自定义消息,富媒体和本地通知.笔者将基于官方说明与个人理解来谈一下这四种消息.本篇为 iOS 篇,Android 篇入口. ...

  9. 五金配件行业ERP解决方案

    五金行业信息化需求分析 “国内竞争国际化,国际竞争国内化”将是近几年我国五金行业发展的特点,中国作为全球五金制造中心的地位将进一步稳固.随着中国融入全球经济环境进程的加快以及经济实力的快速崛起,中国已 ...

  10. centOS7 mini配置linux服务器(三) 配置防火墙以及IPtables切换

    一.firewall介绍 CentOS 7中防火墙是一个非常的强大的功能,在CentOS 6.5中在iptables防火墙中进行了升级了. 1.官方介绍 The dynamic firewall da ...