CSS实现面包屑

浏览数：36 / 时间：2015年06月09日

　　面包屑在用户引导方面起到很大作用，可以清晰的为用户指示出其当前所在位置，以及访问到此的整个路径如何，另一方面，面包屑也可以将较长的表单分割成一步一步完成且互动性较强的任务式表单填写。可见其在网页中的重要性。但样式美观的面包屑包含一些形状，这在CSS3以前得靠图片等其他方式实现，现在有了CSS3之后，我们可以很方便的用CSS绘制出常见的面包屑。

　　下面的案例中涉及了三个内容，所以将其记录于此：
1. display：inline-block的间距文题（是由于我们格式化代码时换行导致）
2. border属性实现任意方向的三角形和其他形状
3. IE6下transparent为黑色的问题

  1     <!DOCTYPE html>
  2     <html>
  3     <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         body,html,ul,li{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul {
 12             width: 900px;
 13             font-size: 0px; /*兼容Chrome*/
 14             letter-spacing: -10px; /*兼容Safari*/
 15             word-spacing: -10px; /*兼容Safari*/
 16         }
 17 
 18         li {
 19             list-style-type: none;
 20             display: inline-block;
 21             background: #eee;
 22             width: 200px;
 23             line-height: 30px;
 24             text-align: center;
 25             font-size: 14px; /*兼容Chrome*/
 26             color: #333;
 27             font-family: 微软雅黑;
 28             letter-spacing: normal; /*兼容Safari*/
 29             word-spacing: normal; /*兼容Safari*/
 30             margin: 0 10px;
 31             position: relative;
 32         }
 33 
 34         .current {
 35             background: #F60;
 36             color: #fff;
 37         }
 38 
 39         li::before {
 40             content: "";
 41             display: block;
 42             position: absolute;
 43             height: 0px;
 44             width: 0px;
 45             border-width: 15px;
 46             border-style: dashed dashed dashed solid; /*dashed用以解决IE透明问题*/
 47             border-color: transparent transparent transparent #ffffff;
 48         }
 49 
 50         li::after {
 51             content: "";
 52             display: block;
 53             position: absolute;
 54             z-index: 2;
 55             top: 0;
 56             right: -30px;
 57             height: 0px;
 58             width: 0px;
 59             border-width: 15px;
 60             border-style: dashed dashed dashed solid;
 61             border-color: transparent transparent transparent #eee;
 62         }
 63 
 64         .current::before {
 65             content: "";
 66             display: block;
 67             position: absolute;
 68             height: 0px;
 69             width: 0px;
 70             border-width: 15px;
 71             border-style: dashed dashed dashed solid;
 72             border-color: transparent transparent transparent #ffffff;
 73         }
 74 
 75         .current::after {
 76             content: "";
 77             display: block;
 78             position: absolute;
 79             z-index: 2;
 80             top: 0;
 81             right: -30px;
 82             height: 0px;
 83             width: 0px;
 84             border-width: 15px;
 85             border-style: dashed dashed dashed solid;
 86             border-color: transparent transparent transparent #f60;
 87         }
 88 
 89         li:last-child::after {
 90             content: "";
 91             border: none;
 92         }
 93 
 94         li:first-child::before {
 95             content: "";
 96             border: none;
 97         }
 98     </style>
 99     </head>
100     <body>
101     <ul>
102         <li>第一步</li>
103         <li class="current">第二步</li>
104         <li>第三步</li>
105         <li>第四步</li>
106     </ul>
107     </body>
108     </html>