无图无定位新版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.将需要滚动的内容复制一份于同一行 ...
随机推荐
- shell编程其实真的很简单(四)
上篇我们学习了shell中条件选择语句的用法.接下来本篇就来学习循环语句.在shell中,循环是通过for, while, until命令来实现的.下面就分别来看看吧. for for循环有两种形式: ...
- unity中锁定鼠标移动&&隐藏鼠标&&强制是鼠标移动到某一位置
[System.Runtime.InteropServices.DllImport("user32.dll")] //引入dll public static extern int ...
- 5天2亿活跃用户,QQ“LBS+AR”天降红包活动后台揭密
作者:Dovejbwang,腾讯后台开发工程师,参与“LBS+AR”天降红包项目,其所在“2016春节红包联合项目团队”获得2016公司级业务突破奖. 商业转载请联系腾讯WeTest获得授权,非商业转 ...
- 一个技术汪的开源梦 —— 微信开发工具包(WeixinSDK)
由于春节的关系 WeixinSDK 这个开源项目的进展比预期推迟了大约一个月的时间,值得高兴的是到目前为止该项目的重要模块已经开发完毕. - 关于项目 该项目的背景是现在微信公众号.微信服务号乃至微 ...
- Debug和Release区别
VC下Debug和Release区别 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步 ...
- [UWP]涨姿势UWP源码——UI布局
懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页 ...
- 了解 : http请求过程
游览器的请求就是http 请求,在javascript里可以调用.在发http请求时需要 1.header : 通常表明这是什么报头,如:图片是没有报头的.如果是ajax,会是json 2.body ...
- jquery的ajax提交后,会跳转页面
今天在写代码的时候,遇到一个很奇怪的问题,一个form表单,用的是ajax的方式提交.结果,在服务器端php中,使用exit(),函数后都不能停止,并且继续跳转到本页.请求如下: 第一个请求中,其实我 ...
- SSIS 数据流的连接和查找转换
在SSIS的数据流组件中,SSIS引擎使用Merge Join组件和 Lookup组件实现TSQL语句中的inner join 和 outer join 功能,Lookup查找组件的功能更类似TSQL ...
- MySQL优化-一 、缓存优化
body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...