学习使用 CSS3 制作网站面包屑导航效果

　　作为最重要的导航展示形式之一，面包屑导航能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面。在本教程中，您将学习如何使用CSS3技术创建自己的面包屑导航效果。

效果演示 插件下载 详细教程

HTML示例代码：

<ul id="breadcrumbs-one">    <li><a href="">Lorem ipsum</a></li>    <li><a href="">Vivamus nisi eros</a></li>    <li><a href="">Nulla sed lorem risus</a></li>    <li><a href="">Nam iaculis commodo</a></li>    <li><a href="" class="current">Current crumb</a></li></ul>

CSS示例代码：

#breadcrumbs-one{  background: #eee;  border-width: 1px;  border-style: solid;  border-color: #f5f5f5 #e5e5e5 #ccc;  border-radius: 5px;  box-shadow: 0 0 2px rgba(0,0,0,.2);  overflow: hidden;  width: 100%;}#breadcrumbs-one li{  float: left;}#breadcrumbs-one a{  padding: .7em 1em .7em 2em;  float: left;  text-decoration: none;  color: #444;  position: relative;  text-shadow: 0 1px 0 rgba(255,255,255,.5);  background-color: #ddd;  background-image: linear-gradient(to right, #f5f5f5, #ddd);  }#breadcrumbs-one li:first-child a{  padding-left: 1em;  border-radius: 5px 0 0 5px;}#breadcrumbs-one a:hover{  background: #fff;}#breadcrumbs-one a::after,#breadcrumbs-one a::before{  content: "";  position: absolute;  top: 50%;  margin-top: -1.5em;     border-top: 1.5em solid transparent;  border-bottom: 1.5em solid transparent;  border-left: 1em solid;  right: -1em;}#breadcrumbs-one a::after{   z-index: 2;  border-left-color: #ddd;  }#breadcrumbs-one a::before{  border-left-color: #ccc;    right: -1.1em;  z-index: 1; }#breadcrumbs-one a:hover::after{  border-left-color: #fff;}#breadcrumbs-one .current,#breadcrumbs-one .current:hover{  font-weight: bold;  background: none;}#breadcrumbs-one .current::after,#breadcrumbs-one .current::before{  content: normal;  }

• Web 开发中很实用的10个效果【源码下载】
• 精心挑选的优秀jQuery Ajax分页插件和教程
• 12个让人惊叹的的创意的 404 错误页面设计
• 让网站动起来！12款优秀的 jQuery 动画插件
• 十分惊艳的8个 HTML5 & javaScript 特效

本文链接：学习使用 CSS3 制作网站面包屑导航效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源