做之前,先看一下效果图。

demo01.png

首先,书写好 HTML 代码。

    <div id="crumbs">
<ul>
<li><a href="#">Home</a></li>
</ul>
</div>

这里我们先以一个 li 标签为例。

   #crumbs ul{
list-style: none;
}

将列表的默认样式修改掉。

    #crumbs ul li a{
float: left;
margin-right: 30px;
display: inline-block;
position: relative;
height: 30px;
padding: 10px 20px 0 20px;
text-align: center;
background-color: #3498db;
color: #fff;
text-decoration: none;
font-size: 20px;
}
  1. 设置 positionrelative, 因为下面我们要用 before, after 绘制效果。
  2. 设置高度为 30pxpadding-top10px ,所以这里元素的高度为 40px

这个时候的效果如下所示。

demo02.png
    #crumbs ul li a:after{
content: "";
border-left: 20px solid green;
border-top: 20px solid red;
border-bottom: 20px solid red;
position: absolute;
right: -20px;
top: 0;
}

现在的效果是这样的。

demo03.png

其实,我到现在还没明白其中的原理,为什么指定了上下左边框中间会有一个三角形出现?希望有明白原理的看到这篇文章能够解释一下。

以上颜色的设置只是为了观察,下面我们可以将上下边框设置为透明,将左边框设置为与 a 元素相同。

    border-left: 20px solid #3498db;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

这个时候效果如下。

demo04.png

可见,效果已经出来了,利用相同的原理,我们绘制出左边的效果。

  #crumbs ul li a:before{
content: "";
border-top: 20px solid #3498db;
border-bottom: 20px solid #3498db;
border-left: 20px solid transparent;
position: absolute;
top: 0;
left: -20px;
}

效果如下

demo05.png

好了,现在我们的效果就已经完成了,如果想要实现我们在开始时候展示的那种效果,我们就需要多写几个标签了,而且第一个元素和最后一个元素和中间的元素效果还是不一样的,下面我们来书写这段代码。

        #crumbs ul li:first-child a{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
} #crumbs ul li:first-child a:before{
display: none;
} #crumbs ul li:last-child a{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
} #crumbs ul li:last-child a:after{
display: none;
}

以上代码并不难懂,我就不在解释,这个时候的效果如下。

demo06.png

为了美观,最好还是为鼠标悬停设置一个背景改变的效果。

        #crumbs ul li a:hover{
background-color:#fa5ba5;
} #crumbs ul li a:hover:after{
border-left-color: #fa5ba5;
} #crumbs ul li a:hover:before{
border-top-color: #fa5ba5;
border-bottom-color: #fa5ba5;
}

这个时候我们点击标签,会出现一个白色的边框,十分难看,可以在 a 元素的 style 中加上下面这行代码。

    outline: none;

Ending.

文/高华峰(简书作者)
原文链接:http://www.jianshu.com/p/030a375934bf
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

CSS 面包屑导航栏的更多相关文章

  1. vue 2.0 + elementUI 实现面包屑导航栏

    Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...

  2. css面包屑导航编号

    content:counter(flag);counter-increment: flag;-->一般给导航条编号1,2,3

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

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

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

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

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

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

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

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

  7. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

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

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

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

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

随机推荐

  1. redis集群如何解决重启不了的问题

    redis使用集群部署,如果遇到断电或者服务器重启,当再次启动的时候,有时候会启动不了.需要使用trib的fix命令进行修复.如果修复还是不行的话,可以清除节点数据再重新建集群,前提要备份之后操作. ...

  2. python3+Django1.11+mysql5.7 MySQL DB API Drivers

    The Python Database API is described in PEP 249. MySQL has three prominent drivers that implement th ...

  3. 【BZOJ1047】[HAOI2007]理想的正方形 (倍增ST表)

    [HAOI2007]理想的正方形 题目描述 有一个\(a*b\)的整数组成的矩阵,现请你从中找出一个\(n*n\)的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: ...

  4. HTTP原理 请求方法

    HTTP的工作过程 一次HTTP操作称为一个事务,其工作过程分为四步: 1.客户机与服务器建立连接:客户单击某个超级链接,HTTP的工作开始,接下来进行TCP连接的三次握手过程. 2.建立连接后,客户 ...

  5. 二分答案 & 洛谷 P2678 跳石头

    首先让我们先学一下二分答案这个东西...   二分答案,肯定与二分有关,还与可能是答案的东西有关... 二分答案的准确定义: 二分答案是指在答案具有单调性的前提下,利用二分的思想枚举答案,将求解问题转 ...

  6. Android 滚动视图(ScollView)

    1.介绍 2.使用技巧 3.xml文件代码 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  7. R语言结果输出方法

    输出函数:cat,sink,writeLines,write.table 根据输出的方向分为输出到屏幕和输出到文件. 1.cat函数即能输出到屏幕,也能输出到文件. 使用方式:cat(... , fi ...

  8. DP设状态 : 状压与线

    [NOIP2017]宝藏(状压) [AHOI2009]中国象棋(状压) [BZOJ1814] URAL1519 Formula 1(插头\(DP\)模板) 新链接 : Luogu5056 , dark ...

  9. numpy-1

    NumPy数组 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数据 大部分操作仅针对于元数据,而不改变底层实际的数据. 关于NumPy数组有几点必 ...

  10. POJ - 1456 贪心 堆常用操作 注意细节

    题意:给定n个商品的deadline和profit,求每天卖一件的情况下的最大获利 显然是一道贪心 按deadline从小到大排序好,动态维护小根(profit)堆的大小<=当前deadline ...