这也是公司用到的，写个demo出来分享

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <title>流程导图</title>

     <style>

         .warpper{

             width: 882px;

             margin: 50px auto;

             text-align: center;

             position: relative;

         }

         .progressbar {

             margin-bottom: 30px;

             overflow: hidden;

             counter-reset: step;

         }

         .progressbar li {

             list-style-type: none;

             color: #33abff;

             text-transform: uppercase;

             font-size: 16px;

             width: 25%;

             float: left;

             position: relative;

         }

         .progressbar li:before {

             content: ' ';

             width: 92px;

             height:80px;

             line-height: 80px;

             display: block;

             font-size: 10px;

             color: #333;

             background: white;

             border-radius: 5px;

             margin: 0 auto 24px auto;

             border:1px solid #33abff;

             background:#fff url(images/g.png) center center no-repeat;

             background-size:50%;

         }

         .progressbar li:after {

             content: '';

             width: 100%;

             height: 1px;

             background: #33abff;

             position: absolute;

             left: -50%;

             top: 40px;

             z-index: -1;

         }

         .progressbar li:first-child:after {

             /*connector not needed before the first step*/

             content: none;

         }

     </style>

 </head>

     <body>

         <div class="warpper">

             <ul class="progressbar">

                 <li>扫我的二维码</li>

                 <li>分享给好友或朋友圈</li>

                 <li>好友注册葛优躺</li>

                 <li>邀请好友成功</li>

             </ul>

         </div>

     </body>

 </html>

一个css3流程导图的更多相关文章

  1. css3选择器——导图篇

    css3选择器主要有:基本选择器 , 层次选择器,  伪类选择器 ,  伪元素选择器 , 属性选择器 基本选择器  层次选择器 伪类选择器分为 动态伪类选择器, 目标伪类选择器, 语言伪类选择器, U ...

  2. CSS3思维导图

  3. 思维导图MindManager流程图有哪些功能

    流程图是思维导图中的一种图表,应用相当广泛.MindManager 2020作为专业的思维导图软件,更加强了流程图的功能,让用户能使用更加简便的MindManager技巧绘制流程图.接下来,就让我们一 ...

  4. kityminder-editor + MongoDB 思维导图数据自动实时保存方案

    最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后,决定采用kityminder-editor作为思维导图编辑器,为了支持实时存储,当思维导 ...

  5. xmind使用教程思维导图

    xmind使用教程思维导图 开始XMind旅程标记: 仅需2个快捷键 1 点击快捷键 创建同级主题 创建子主题 2 输入 选中主题后, 双击鼠标左键 或 单击空格键, 进入编辑状态. 3 其他内容 您 ...

  6. 思维导图软件xmind和mindmanager哪个更好

    思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,目前便捷的网络为人们带来了众多的思维导图软件,而在这些软件中只有亲身实践体验过,才能知道到底思维导图哪个好,哪个又适合自己 ...

  7. MindManager教程：高中数学函数思维导图怎么画

    说起函数,大家应该都不陌生吧,函数不论是在初中还是在高中都是需要重点学习的知识点,不仅仅是重点,更是作为难点曾出现在高考最后一道大题中.那今天我们就来做一个函数思维导图,来简单地了解一下关于函数的一些 ...

  8. 用过MindManager后才知道思维导图原来这么简单

    哈喽大家好!时间过得真是太快了,一眨眼这一年就接近尾声了,相信我们都度过了不平凡但十分充足的一年,不知道大家在2020年中有没有令自己满意的收获呢? 相信大家各自都有精彩的收获,我们不妨把它们总结一下 ...

  9. 在线思维导图Ayoa共享功能使用教程

    Ayoa是一个制作思维导图的软件,除了导图制作,小编在使用过程中还发现了一些令人惊喜的功能,这些功能使得Ayoa有了更大的亮点以吸引用户. 下面就为大家简单介绍几个小编认为Ayoa中较为实用的共享功能 ...

随机推荐

  1. iOS调用系统通讯录获取姓名电话号码（转）

    原文地址:http://blog.csdn.net/idoshi201109/article/details/46007125 OS调用系统通讯录获取姓名电话号码 (iOS 8.0 Xcode6.3可 ...

  2. node.js在windows下的学习笔记(4)---同步，异步，回调的概念

    Node.js是使用事件驱动的,非阻塞的I/O模型,用于构建快速的,可扩展的网络应用程序. Node.js想解决的问题是:处理输入,输入,高并发 1.阻塞与非阻塞 阻塞也叫同步,是指每一次执行一个操作 ...

  3. iOS开发——面试指导

    iOS面试指导 一 经过本人最近的面试和对面试资料的一些汇总,准备记录这些面试题,以便ios开发工程师找工作复习之用,本人希望有面试经验的同学能和我同时完成这个模块,先出面试题,然后会放出答案. 1. ...

  4. HttpClient 4.3.* 上传带中文文件名文件文件名乱码问题的解决

    又是折腾了一天才解决的问题,网上关于这个问题的资料不多,希望写出来能帮到有需要的人. 之前无论怎么设置charset都不起作用, 后来看了这篇文章 才发现MultipartEntityBuilder有 ...

  5. 学习笔记之Python

    http://baike.baidu.com/view/21087.htm?fr=aladdin#reference-[12]-21087-wrap Python 基础教程(http://www.w3 ...

  6. 一、 Socket之UDP异步传输文件

    用SCOKET 发送文件是一个不太好处理的问题,网上的例子也都是很简单的,我准备写一个比较完善的例子,这个就算是开始吧,以后的都会在这个例子的基础上进行修改,准备实现多线程传输.断点传输和文件传输的完 ...

  7. WordPress搭建Personal Blog

    早就想搭建一个专属于自己的博客了,用来记录自己生活.学习的点点滴滴.之所以选WordPress,主要是因为它可以支持Latex,而且特别喜欢其简约的风格. WordPress有个the famous ...

  8. 【思考】由安装zabbix至排障php一系列引发的思考

    [思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...

  9. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. win7 Sendto修改

    sendto目录现在被移到了这里 %APPDATA%\Microsoft\Windows\SendTo %APPDATA%是个环境变量,具体来说是在这里: C:\users\<username& ...