css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS

适用于分步骤操作的页面导航图

实现结果如下

上图对应下述代码，稍作修改可以生成下图。

css代码如下：

@charset "UTF-8";

/**单列宽度 单行高度  列数 行数*/

body {

  font-size: 12px;

  color: #000000;

  font-family: "Microsoft Yahei";

  overflow-x: hidden;

  background: #ffffff; }

/**单列宽度 单行高度  列数 行数*/

.web-width {

  width: 1200px;

  margin: 20px auto; }

.for-liucheng {

  width: 1200px;

  margin: 0 0 0 0;

  height: 160px;

  padding: 0 0 0 0;

  position: relative; }

.liulist {

  float: left;

  width: 300px;

  height: 10px;

  background: #CCCCCC;

  margin-top: 60px; }

.liulists {

  float: left;

  width: 300px;

  height: 100%; }

.liutextbox {

  position: absolute;

  width: 100%;

  height: 160px; }

.liutext {

  float: left;

  width: 300px;

  text-align: center;

  margin-top: 53px; }

.liutexts {

  float: left;

  width: 300px;

  height: 100%;

  text-align: center;

  margin-top: -7px; }

.liutext_2 {

  display: inline-block;

  float: left;

  width: 100%;

  height: 42px;

  text-align: center;

  padding-bottom: 0px; }

em {

  display: inline-block;

  width: 24px;

  height: 24px;

  border-radius: 24px;

  background: #BDBDBD;

  text-align: center;

  font-size: 14px;

  line-height: 24px;

  font-style: normal;

  font-weight: bold;

  color: #fff; }

strong {

  display: inline-block;

  height: 16px;

  line-height: 16px;

  font-weight: 400; }

.for-cur em {

  background: #77b852;

  border: 3px solid #ffffff;

  margin-top: -3px; }

.for-ed em {

  border: 3px solid #F0F0F0;

  margin-top: -3px; }

.for-cur strong {

  color: #77b852; }

.liutext:hover {

  cursor: pointer; }

.liutextbox strong:hover {

  text-decoration: underline; }

.liulists table, table tr th, table tr td {

  border: 10px solid #CCCCCC; }

.liulists td {

  height: 30px; }

.liulists table {

  width: 100%;

  text-align: center;

  border-collapse: collapse; }

html 代码如下

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>步骤图示例</title>

<link type="text/css" href="stylesheets/new_file.css" rel="stylesheet" />

</head>

<script type="text/javascript" src="js/jquery-1.8.3-min.js" ></script>

<script type="text/javascript">

$(function(){

    $("#A").addClass("for-ed"); //已完成

    $("#B1").addClass("for-ed"); //已完成

});

function openH(obj)

{

    //$("#A").addClass("for-cur");

    $(".liutext").removeClass("for-cur");

    $(".liutext_2").removeClass("for-cur");

    $(obj).addClass("for-cur");  

}

</script>

<body style="overflow:hidden"> 

   <div class="web-width">

     <div class="for-liucheng">

      <div class="liulist"></div>

      <div class="liulists" style="float:left;overflow:hidden">

       <table>

        <tr><td>&nbsp;</td></tr>

        <tr><td>&nbsp;</td></tr>

        <tr><td>&nbsp;</td></tr>

       </table>

      </div>

      <div class="liulist"></div>

      <div class="liulist"></div>

      <div class="liutextbox">

      <div id="A"  class="liutext" onclick="openH(this);"><em>1</em><br /><strong>填写账户名</strong></div>

        <div id="B"  class="liutexts" >

           <div id="B1"  class="liutext_2" onclick="openH(this);"><em>1</em><br /><strong>第一步</strong></div>

        <div id="B2"  class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>

         <div id="B3"  class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>

          <div id="B4"  class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>

        </div>

       <div id="C"  class="liutext" onclick="openH(this);"><em>3</em><br /><strong>设置新密码</strong></div>

       <div id="D"  class="liutext" onclick="openH(this);"><em>4</em><br /><strong>完成</strong></div>

      </div>

     </div><!--for-liucheng/-->

   </div><!--web-width/-->

<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>

</body>

</html>

scss
第一部分的css，可以通过scss 设置变量生成css ，方便计算每个步骤环节的高度宽度，使得流程线和流程的位置能对应显示，并且此案例的多行线是通过table的border的宽度实现，相关宽高的设置通过scss变量计算，能适应不同的情况的css编写，具体如下

//sass style

//-----------------------------------

@charset "utf-8";

/**单列宽度 单行高度  列数 行数*/

$dwidth: 300px;

$dheight: 30px;

//横向大环节个数

$anum: 4;

//纵向行个数

$bnum: 4;

$border: 10px;

$height:($dheight+$border) * $bnum - $dheight;

$allheight:($dheight+$border) * $bnum;

//圆圈直径

$circleA: 24px;

//文字

$textA: 16px;

body{font-size:12px;color:#000000; font-family:"Microsoft Yahei"; overflow-x:hidden; background:#ffffff;}

  /**单列宽度 单行高度  列数 行数*/ 

.web-width{width: 1200px;margin:20px auto;}

.for-liucheng{width: $dwidth *$anum ;margin:0 0 0 0;height: $allheight;padding:0 0 0 0; position:relative;}

.liulist{float:left;width:$dwidth; height:$border;background:#CCCCCC;margin-top: ($height - $border)/2;}

.liulists{float:left;width:$dwidth; height:100%;}

.liutextbox{ position:absolute;width:100%;height:($dheight+$border) * $bnum;}

.liutext{float:left;width:$dwidth;text-align:center;margin-top: ($height - $border)/2-$circleA/2+$border/2;}

.liutexts{float:left;width:$dwidth;height:100%; text-align:center;margin-top: -$circleA/2+$border/2;}

.liutext_2{display:inline-block;float:left;width:100%; height:$allheight/$bnum+2px;text-align:center;padding-bottom: 0px;}

em{ display:inline-block;width:$circleA; height:$circleA;border-radius:$circleA; background:#BDBDBD; text-align:center; font-size:14px; line-height:$circleA; font-style:normal; font-weight:bold;color:#fff;}

strong{ display:inline-block;height:$textA; line-height:$textA; font-weight:400;}

.for-cur em{ background:#77b852;border:3px solid #ffffff;margin-top: -3px;}

.for-ed em{ border:3px solid #F0F0F0;margin-top: -3px;}

.for-cur strong{color:#77b852;}

.liutext:hover

{

cursor: pointer;

}

.liutextbox strong:hover

{

text-decoration: underline;

}

.liulists table,table tr th, table tr td { border:$border solid #CCCCCC; }

.liulists td { height: $dheight; }

.liulists table { width: 100%;text-align: center; border-collapse: collapse;}

css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS的更多相关文章

微信小程序~项目步骤和流程
从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂,小白也能按照流程完成制作. 微信小程序制作步骤及流程 1.确定好微信小程序的的定位和目的如行业,功能,内容,目标用户,目标市场,意 ...
前端优化：css雪碧图实践应用详解
一为什么需要使用雪碧图二CSS雪碧图原理及应用前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
CSS品控与流程
精通CSS意味着不仅能写出可用的标记和样式,还能让代码好阅读.方便移植.易维护. 1.外部代码质量:调试CSS 外部代理质量就是用户能体验到的最终结果.主要体现在几个方面. 正确性.CSS属性名都写对 ...
在线Spirte图定位工具，自动生成CSS
发现一个在线雪碧图中的图片地位的工具,并且能够自动生成css.spritecow 废话不多说,有图有真相:
使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
.使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页 ...
Css雪碧图
Css雪碧图: CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

随机推荐

我对maptask 和 reducetask的理解
MapTask: 首先经过 FileInputFormat 判断该文件是否要进行切片,如果是我们自定义的FileInputFormat基本上重写isSplit方法返回为false表示不进行切片,那么就 ...
Qt：QNetworkReply
0.说明 QNetworkReply对象包含了Manager发送的请求头和返回的数据. 它继承自QIODevice,所以可以用各种read获取其中返回的数据: QByteArray data = re ...
简单认识java enum枚举
什么是枚举枚举是java5中新增的特性,他是一个特殊的数据类型,他的特殊性在于他既是一种类类型,又比类类型多了安全性,简洁性,便捷性.java枚举类型是功能十分强大齐全的类,功能比其他语言中的对等物 ...
Angular依赖注入：全面讲解（翻译中）
在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候 ...
windows禁止iis开机自启
按Win 和R,打开运行窗口.输入services.msc确定打开服务窗口.找到World Wide Web Publishing Service禁用并停止.
安全学习笔记-web安全之XSS攻击
web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...
SourceTree代码变更和FoxMail邮件管理（效率小计俩）
代码变更溯源工作时,我们经常会想要查看一个类文件的变更历史,最常见的场景是:"卧槽,谁改了我的代码" 新版本的Xcode溯源自我感觉相当难用,所以这里我们介绍一个工具 Sourc ...
如何取消以太坊智能合约授权，防止被黑客盗取Token？
在小狐狸钱包(MetaMask)日常使用中,有一个细节可能很少人注意到,就是无论你登入什么网站,或者需要跟任何项目签订智能合约都要授权的步骤,这其中就会给黑客留下很多空子,特别是将一个Token用智能 ...
1、如何抓取Modbus TCP/UDP 数据包实战
CEIWEI最近发布了Modbus RTU Over TCP/UDP 过滤监控的新工具,下面以Modbus RTU TCP为示例,讲解如何抓取Modbus通信数据包,因为CEIWEI ModbusMo ...
模块序列化模块：json pickle
模块:一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀模块的形象: 内置模块:安装Python解释器的时候一起安装上的第三方模块(扩展模块):需要自己安装自 ...

css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS

css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS的更多相关文章

随机推荐

热门专题