纯CSS 箭头流程,网上找的,留着备用
无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需
实际效果
源代码:
HTML:
<div class="wrapper">
<ul class="flow-steps">
<li><b class="f"></b><a href="#">步骤一</a><s></s></li>
<li class="on"><b></b><a href="#">步骤二</a><s></s></li>
<li><b></b><a href="#">步骤三</a><s></s></li>
<li><b></b><a href="#">步骤四</a><s></s></li>
</ul>
</div>
CSS:
.wrapper{ padding:20px;}
.flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}
.flow-steps li{ float:left; height:30px; margin-right:-32px; background:#d7d7d7; line-height:30px; overflow:hidden;}
.flow-steps a{ display:block; float:left; width:80px; padding: 0 18px 0 0; text-align:center; color:#333; text-decoration:none;}
.flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;}
.flow-steps s{ position:relative; float:left; width:0px; height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/ _border-color:snow; _filter:chroma(color=snow);/*For IE6*/ border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;}
.flow-steps .on{ background:#ff6600;}
.flow-steps .on a{ color:#fff;}
.flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; }
.flow-steps .on s{ border-left-color:#ff6600;}
.flow-steps .f{ border-color:#d7d7d7!important;}
纯CSS 箭头流程,网上找的,留着备用的更多相关文章
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看
使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 纯css实现网上商城左侧垂直商品分类菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- div模拟table,可实现左右高度同增长(html布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 读写CSV文件
var allFiles = Directory.GetFiles(@"D:\uploadpdf", "*.csv"); string dataIsNull = ...
- C# 模拟webform里面按钮的点击事件
生成的html内容 <body> <form method="post" action="./Login.aspx" id="for ...
- 项目导入myeclipse10后jsp报错问题
电脑重装系统装了个myeclipse10,当项目导入时发现jsp报错,原本以为是jdk版本问题,在网上找了资料才知道原来是myeclipse10相对之前版本对js的检查更加严格了.可以用以下方法解决: ...
- iOS版本更新的App提交审核流程
App的版本更新估计是在所难免的了!更新App和新的App发布有何不同了?今天我们一起来看看吧!在发布App的时候我们需要通过开发者帐号——(申请)——>发布证书(需要钥匙串对证书签名也叫加密( ...
- mysql sql语句大全
1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...
- stm8s103 PWM
stm8s103 PWM的设置不难,但是很多人不注意选项字节这个问题,PWM是IO口的第二功能,要用ST Visual Programmer 修改选项字节. 只需要修改AFR0的功能就可以了
- windows内核编程 白话设备栈
在ntddk.h中定义了该函数原型: #if (NTDDI_VERSION >= NTDDI_WINXP) NTKERNELAPI NTSTATUS IoAttachDeviceToDevice ...
- jsp页面验证码(完整实例)
项目结构如下,MyEclipse中新建一个Web Project,取名servlet 1.src下new一个servlet类 package com.servlet; import java.awt. ...