作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 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;
}

  

您可能感兴趣的相关文章

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

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

学习使用 CSS3 制作网站面包屑导航效果的更多相关文章

  1. 纯CSS3编写的面包屑导航收集

    整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...

  2. NEC学习 ---- 模块 -多行式面包屑导航

    如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...

  3. 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善

    如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...

  4. 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台列表页面包屑导航的显示

    我们做面包屑导航的原理其实也是很简单的,我们的思路是: 首先找到该分类的id ,我们可以通过大 I来进行获取得到: 然后通过 大 D 方法让数据进入model层里面进行循环迭代查询, 当然,测试时候发 ...

  5. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  6. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

  7. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  8. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

  9. 帝国cms面包屑导航的首页链接锚文本改成关键字

    帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...

随机推荐

  1. Linux(centeros)安装weblogic10.3.6教程

    http://wenku.baidu.com/link?url=yCLXoDpK7AMdy1_TgGXDncY42Bz6ptdaNq58GdicFWqyI5i-fCvui6mFuIYDt6jkqSiY ...

  2. halcon三种模板匹配方法

    halcon有三种模板匹配方法:即Component-Based.Gray-Value-Based.Shaped_based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配和基于形状的匹配,此 ...

  3. linux-13基础命令之-touch,mkdir

    1.  touch 命令 用于创建空白文件与修改文件时间,格式:touch[选项][文件]: linux 下文件时间有三种 @1.更改时间(mtime):内容修改时间: @2.更改权限(ctime): ...

  4. node.js-session问题

    在使用express使用session时发现怎么使用session都是undefined最后发现 app.use(express.cookieParser()); app.use(express.se ...

  5. 双击防止网页放大缩小HTML5

    幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale ...

  6. 冲刺阶段 day11

    项目进展:系部,专业,班级管理这三项没有学生,教师管理部分输入项目多,所以窗体搭建比较简单,代码也简单一些,进行的还算顺利,有了之前的编写经验,很多代码可以直接copy过来,越进行编写越顺利了,已经进 ...

  7. JavaScript思维导图—字符串函数

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

  8. iOS——CALayer的shadow无效问题

    CALayer *sublayer = [CALayer layer]; sublayer.backgroundColor = [UIColor purpleColor].CGColor; subla ...

  9. js限制input标签中只能输入中文

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. SQL面试题

    Student(S#,Sname,Sage,Ssex) 学生表     S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别Course(C#,Cname,T#) 课程表     ...