无图无定位新版css步骤条兼容ie6+
<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+的更多相关文章
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 页面元素固定在页面底部的纯css代码(兼容IE6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery元素分组插件,用于把一连串元素分成多组,如把多个a标签分成多组放入<li>元素中,可以用于简化多图滚动为一个元素滚动,兼容ie6
三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置 ...
- css实现步骤条(未封装组件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jquery多种切换效果的焦点图(兼容ie6)
随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...
- Mac系统Safari浏览器启动无图模式
有的时候我们用热点上网,图片的出现会消耗大量的流量,这时候就需要启动无图模式不加载图片. 步骤:启动Safari浏览器->偏好设置->高级->勾选“在菜单栏中显示“开发”菜单”-&g ...
- (转)cacti无图无数据等常见问题排查
推荐阅读:零基础学习Nagios http://www.51ou.com/browse/nagios/52001.htmlNagios安装配置教程 http://www.51ou.com/browse ...
- dedecms列表页有图调用缩略图无图留空的方法
默认情况下,织梦的文章列表页会调用出当前栏目下的文章列表,并且调用出每个文章的缩略图:如果文章本身就有图,会调用出一张小图,如果没有,则会显示默认的织梦图片.这种处理方式有时候比较影响美观,其实可以修 ...
- marquee标签跑马灯连续无空白播放效果 纯CSS(chrome opera有效)
marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...
随机推荐
- Java字符串之String与StringBuilder
String与SringBuiler的一些比较 在Java中,我们会大量使用字符串,但是String究竟是怎样工作的我们可能没有想过太多,其实在String类中,每一个看起来会修改String值的 ...
- 在windows搭建react-native android 开发环境总结
1.安装必须的软件 1.Python 2 注意勾选 Add python.exe to Path,选项,这样就可以在安装完成后,不用手动去添加环境变量 安装完,打开cmd.exe,输入py ...
- phpcms基础知识和配置
一.设置界面 1.站点设置:相当于服务器上的站点 (1)站点修改:“关键词”和“描述”的修改,便于网络优化和搜索引擎对本网站的搜索. (2)模板的修改,可以自己加模板,引用自己模板 2.基本设置:所有 ...
- Java(多态练习 instanceof)
/* 题目: (多态,instanceof)有如下代码 class Animal { private String name; // 1 } class Dog extends Animal { // ...
- warshall、
#include<iostream> int mian() { ][],b[][],c[][]; int i,j,k; cout<<"input the Boolea ...
- 使用hubuild,mui开发微信app—首页(一)
写在前面 本系列文章我将介绍一下从零开始利用hubuild,mui实现微信app的开发,该系列是个人学习记录,所以在每篇文章中,都是从怎么去实现开始讲解,然后再把实例中涉及知识点做一个概述. 创建一个 ...
- c++中,int *a=new int(120)语句的意思
int *a=new int(120); 申请一个整型变量空间,赋初值为120,并定义一个整型指针a指向该地址空间 int *a=new int[120]; 申请120个整型变量空间,没有赋初值,并定 ...
- vc release模式设置断点调试
在VC release模式做如下设置:在 工程->属性->c/c++->常规->调试信息格式选择 -> 程序数据库(/Zi) 在 工程->属性->链接器-&g ...
- 连载《一个程序猿的生命周期》-《发展篇》 - 7.是什么阻碍了"程序猿"的发展?
有两件事想记录一下,具有普遍性和代表性."程序猿"加了引号,是泛指一类人,也并非局限于IT行业. 山东子公司的总经理是公司大股东之一,个子不高.有些秃顶.面容显老,但看 ...
- 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)
这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...