<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. ERP的基础管理-物料编码

    在企业ERP系统中,物料编码管理是所有数据的基础,可以这样说:"没有物料编码就没有ERP".实际上物料编码对于制造类企业供应链管理作用不可说不巨大,影响不可谓不深远,甚至我们在考虑 ...

  2. 浅谈时间复杂度- 算法衡量标准Big O

    写在前面: 今天有一场考试,考到了Big-O的知识点,考到了一道原题,原题的答案我记住了,但实际题目有一些改动导致答案有所改动,为此作者决定重新整理一下复杂度相关知识点 Efficiency and ...

  3. WEB前端性能优化之二——css优化

    1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...

  4. java-7继承

    请自行编写代码测试以下特性(动手动脑):在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. public class QWE {    public void main(String[] ...

  5. 一个RESTful+MySQL程序

    前言 本章内容适合初学者(本人也是初学者). 上一章内容(http://www.cnblogs.com/vanezkw/p/6414392.html)是在浏览器中显示Hello World,今天我们要 ...

  6. selenium框架与chrome浏览器的不兼容问题

    在一次偶然的情况下,在chrome上用selenium框架去抓取某个id为XX的页面元素,使用WebDriver的findElement().click()方法进行点击,原来在firefox浏览器运行 ...

  7. git的安装和环境配置过程(学习笔记)

    1.安装git 官网下载:https://github.com(目前官网好像找不到了,但是妙味的视频里面是在官网下载的)https://git-for-windows.github.io/ (廖雪峰老 ...

  8. Mac入门推荐(写给Mac小白)

    本人第一次接触Mac是在2016年10月中旬,那时由于对苹果系统的不熟悉,导致自己一开始的时候用的很不习惯,甚至还想换回Windows系统.总所周知,苹果系统的软件比较少,在此我向大家推荐一些个人觉得 ...

  9. Nginx+tomcat动静分离安装脚本

    #!/bin/bashsetenforce 0systemctl stop firewalldtar -zxvf nginx-1.8.0.tar.gz -C /usr/src/ cd /usr/src ...

  10. 面对考试毫无畏惧的SSH

    [Struts+Spring+Hibernate] 新建一个项目 把SSH jar包(包含mysql.oracle.jackson等包在里面) 把web.xml复制到WebContent\WEB-IN ...