CSS 面包屑导航栏

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

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.

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,900评论 1 91
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 1,790评论 0 30
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 155,923评论 24 680
  • 1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义H...
    静默丶阅读 4,757评论 30 95
  • 原谅我红尘颠倒文/凤鸣盏上个月,朋友分享给我一篇慕容雪村的采访,我说手头正好有他一本书,《原谅我红尘颠倒》,朋友说...
    喵了个柚子阅读 356评论 3 7