css流程圖、步驟圖，流程線與環節分別實現，支持單環節、多環節狀況。scss生成CSS

時間 2019-12-07

標籤 css 流程圖步驟流程環節分別實現支持狀況 scss 生成欄目 CSS 简体版

原文原文鏈接

適用於分步驟操做的頁面導航圖javascript

實現結果以下css

上圖對應下述代碼，稍做修改能夠生成下圖。

css代碼以下：html

@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 代碼以下java

<!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>適用瀏覽器：IE八、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.</p>
</div>
</body>
</html>

scss
第一部分的css，能夠經過scss 設置變量生成css ，方便計算每一個步驟環節的高度寬度，使得流程線和流程的位置能對應顯示，而且此案例的多行線是經過table的border的寬度實現，相關寬高的設置經過scss變量計算，能適應不一樣的狀況的css編寫，具體以下jquery

//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;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。