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

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

实现结果如下

图片描述

上图对应下述代码，稍作修改可以生成下图。
图片描述
css代码如下：

@charset "UTF-8";
/**单列宽度 单行高度  列数 行数*/
body {
  font-size: 12px;
  color: #000000;
  font-family: "Microsoft Yahei";
  overflow-x: hidden;
  background: #ffffff; }

/**单列宽度 单行高度  列数 行数*/
.web-width {
   1200px;
  margin: 20px auto; }

.for-liucheng {
   1200px;
  margin: 0 0 0 0;
  height: 160px;
  padding: 0 0 0 0;
  position: relative; }

.liulist {
  float: left;
   300px;
  height: 10px;
  background: #CCCCCC;
  margin-top: 60px; }

.liulists {
  float: left;
   300px;
  height: 100%; }

.liutextbox {
  position: absolute;
   100%;
  height: 160px; }

.liutext {
  float: left;
   300px;
  text-align: center;
  margin-top: 53px; }

.liutexts {
  float: left;
   300px;
  height: 100%;
  text-align: center;
  margin-top: -7px; }

.liutext_2 {
  display: inline-block;
  float: left;
   100%;
  height: 42px;
  text-align: center;
  padding-bottom: 0px; }

em {
  display: inline-block;
   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 {
   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";
/**单列宽度 单行高度  列数 行数*/ 
$d 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{ 1200px;margin:20px auto;}

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

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

.liutextbox{ position:absolute;100%;height:($dheight+$border) * $bnum;}
.liutext{float:left;$dwidth;text-align:center;margin-top: ($height - $border)/2-$circleA/2+$border/2;}
.liutexts{float:left;$dwidth;height:100%; text-align:center;margin-top: -$circleA/2+$border/2;}
.liutext_2{display:inline-block;float:left;100%; height:$allheight/$bnum+2px;text-align:center;padding-bottom: 0px;}

em{ display:inline-block;$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 {  100%;text-align: center; border-collapse: collapse;}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/10manongit/p/13039010.html