适用于分步骤操作的页面导航图
实现结果如下
上图对应下述代码，稍作修改可以生成下图。
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> </td></tr>
<tr><td> </td></tr>
<tr><td> </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;}