【CSS Demo】純 CSS 打造 Flow-Steps 導航

2017/2/9 8:36:11 閱讀：1834 發布者：1834

low-Steps 導航效果常用于需要表示執行步驟的交互頁面，效果如下：

通常使用圖片來實現 Flow-Steps 效果，但此方法的靈活性不足，當內容變化較大
時就可能需要重新切圖，這里介紹使用純 CSS 的方法來實現 Flow-Steps 效果：

兼容版本

此版本兼容主流的瀏覽器（IE6、7、8… FF、chrome），但也因此
導致 HTML 結構比較復雜，并且使用了 IE 的濾鏡，Demo 如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS flow-steps/crumbs</title> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
.wrapper{ padding:20px;} 
.flow-steps{ position:relative; height:30px; list-style:none;
 font-size:14px; overflow:hidden;} 
    .flow-steps li{ float:left; height:30px; margin-right:-32px;
 background:#d7d7d7; line-height:30px; overflow:hidden;} 
    .flow-steps a{ display:block; float:left; width:80px; padding: 0 18px 0 0;
 text-align:center; color:#333; text-decoration:none;} 
    .flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px;
 border:21px solid #d7d7d7; border-left-color:#fff;
 font-size:0; line-height:0; z-index:9;} 
    .flow-steps s{ position:relative; float:left; width:0px;
 height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/
 _border-color:snow; _filter:chroma(color=snow);/*For IE6*/
 border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;} 
    .flow-steps .on{ background:#ff6600;} 
    .flow-steps .on a{ color:#fff;} 
    .flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; } 
    .flow-steps .on s{ border-left-color:#ff6600;} 
    .flow-steps .f{ border-color:#d7d7d7!important;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <ul class="flow-steps"> 
        <li><b class="f"></b><a href="#">步驟一</a><s></s></li> 
        <li class="on"><b></b><a href="#">步驟二</a><s></s></li> 
        <li><b></b><a href="#">步驟三</a><s></s></li> 
        <li><b></b><a href="#">iinterest.net</a><s></s></li> 
    </ul> 
</div> 
</body> 
</html>

兩點必要的說明：

1.三角箭頭效果是用 border 實現的

2.因 IE6 下不支持 border-color:transparent，解決方法是先將其設置為
一個不常用的顏色，然后再用IE的濾鏡將其透明化（Demo 中有注釋）

CSS3 版本

使用了 CSS3 的版本，HTML 代碼就要簡潔很多，因為使用了
偽元素來替代一些無意義的標簽，同時也實現 :hover 效果，
缺點就是不兼容 IE6。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS flow-steps/crumbs</title> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
.wrapper{ padding:20px;} 
.flow-steps{ position:relative; height:30px; list-style:none;
 font-size:14px; overflow:hidden;} 
    .flow-steps li{ float:left; margin-right:-28px;} 
    .flow-steps a{ display:block; float:left; width:170px;
 min-width:150px; height:30px; background:#d7d7d7; color:#333;
 line-height:30px; text-align:center; text-decoration:none;} 
    .flow-steps a:before{ content:""; display:block; float:left;
 width:0; height:0px; margin-top:-6px; border:21px solid transparent;
 border-left-color:#fff;} 
    .flow-steps a:after{ content:""; position:relative; display:block;
 float:right; width:0; height:0px; margin:0 -1px 0 10px;
 border:15px solid transparent; border-left-color:#d7d7d7;} 
    .flow-steps li:first-child a:before{ border:12px solid #d7d7d7;} 
    .flow-steps li:last-child a:after{ border:8px solid #d7d7d7; margin-right:0;} 
    .flow-steps .on a{ background:#ff6600; color:#fff;} 
    .flow-steps .on a:after{ border-left-color:#ff6600;} 
    .flow-steps li.on:first-child a:before{ border-color:#ff6600;} 
    .flow-steps li:hover a{ background:#ff6600; color:#fff;} 
    .flow-steps li:hover a:after{ border-left-color:#ff6600;} 
    .flow-steps li:first-child:hover a:before{ border-color:#ff6600;} 
    .flow-steps li:last-child:hover a:after{ border-color:#ff6600;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <ul class="flow-steps"> 
        <li><a href="#">步驟一</a></li> 
        <li><a href="#">步驟二</a></li> 
        <li class="on"><a href="#">步驟三</a></li> 
        <li><a href="#">iinterest.net</a></li> 
    </ul> 
    <div class="arr"></div> 
</div> 
</body> 
</html>