学习使用 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 制作网站面包屑导航效果

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

学习使用 CSS3 制作网站面包屑导航效果的相关教程结束。