脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > Div+CSS教程 >

div+css实现带箭头的面包屑导航栏

  发布时间：2017-04-06 16:33:48   作者：中二晚期   我要评论
本文主要介绍了制作漂亮美观的带箭头的面包屑导航栏的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

制作漂亮美观的面包屑导航栏

在开始之前，我要照例给大家科普一下啥叫面包屑导航栏

类似于下面这几种的

主页>栏目页>文章页面

主页/栏目页/文章页面

可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏

但是。。。。。。

你不觉得这个不好看吗？

如果哪一天，你们公司的UI给你一张图，图里的面包屑导航栏是这样的

这样的

又或者是其他带图案的面包屑导航栏，这时候应该怎么做？

可能有朋友说这个简单，so easy，直接找个图案给导航栏加background就行了

可是，真的有这么简单吗？好，废话不多说，让我们直接开始动手实践一下，看到底该如何完成这种高颜值的面包削导航栏

1、先用无序列表做一个导航栏，代码如下

<ul>
    <li>
        <a href="#">主页</a>
    </li>
    <li>
        <a href="#">主页2</a>
    </li>
    <li>
        <a href="#">主页3</a>
    </li>
    <li>
        <a href="#">主页4</a>
    </li>
    <li>
        <a href="#">主页5</a>
    </li>
</ul>

接下来是css代码

body{background:#000}
ul{ list-style: none;}
li{
width: 60px;
height: 50px;
line-height: 50px;
float: left;
background: #6cf;
text-align: center;
}
a{
color: #000;
text-decoration: none;
}

css代码也没什么特别的，就跟平常做nav差不多。接下来就开始将我们选中的背景图放上去，就是下面这张图

给导航栏里面的li添加背景图片

body{
                background: #000;
            }
            ul{
                list-style: none;
                margin: 100px 100px;
            }
            li{
                width: 60px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
            }
            a{
                color: #000;
                text-decoration: none;
            }

这时候的页面效果是这样子的

纳尼？这有点不对啊？导演，这剧本有问题啊！

确实是有问题，但是问题在哪？

上下图一对比，问题出在哪里立刻就清楚了，每一个导航（除了最后一个）的>是堆在紧邻的下一个导航的身上的，那么这个时候，我们只需要给li标签加一个margin-left:-15px;就可以了，具体代码如下

li{
                width: 80px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
                margin-left: -15px;
            }

由于一开的宽度没给足够，所以这里我稍微加了下li的宽度，加上之后，我们的面包屑导航栏就变成了这个样子

咦？我们的箭头呢？

说好的箭头呢？

第1-4的箭头去哪了？

让我们再次倒回上一步操作，我们上一步操作是给li标签加margin-left：-15px;

前端的东西有个特性，后面写的属性通常会覆盖前面的属性，而dom结构虽然不会覆盖，但是当两者位置重叠时，在没有加z-index属性之前，或者该属性值相等的时候，后写的dom结构会在上面

这里也正是这种情况，所以我们只需要在li标签上，单独加上不同的z-index即可（要想要z-index属性生效，必须先加定位，position:relative）

这里对z-index的值没有多少限制，但只有一点，那就是最后一个li标签是最小的，以此类推，逐渐递增，第一个是最大的。

最终代码是这样子的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: #000;
            }
            ul{
                list-style: none;
                margin: 100px 100px;
            }
            li{
                width: 80px;
                height: 30px;
                line-height: 30px;
                float: left;
                background: #6cf;
                text-align: center;
                background: url(img/bg.png) no-repeat 100% 0;
                margin-left: -15px;
                position: relative;/*保证z-index有效*/
            }
            a{
                color: #000;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li style="z-index: 5;">
                <a href="#">主页</a>
            </li>
            <li style="z-index: 4;">
                <a href="#">主页2</a>
            </li>
            <li style="z-index: 3;">
                <a href="#">主页3</a>
            </li>
            <li style="z-index: 2;">
                <a href="#">主页4</a>
            </li>
            <li style="z-index: 1;">
                <a href="#">主页5</a>
            </li>
        </ul>
    </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

相关文章

  • html+css+js实现导航栏滚动渐变效果

    这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-28

  • 不可思议的CSS导航栏下划线跟随效果

    这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果，本文图文并茂实例代码详解，给大家介绍的非常详细，需要的朋友参考下吧
    2019-12-09

  • html+css 实现简易导航栏功能

    这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
    2021-04-07

  • CSS中的导航栏和下拉菜单的实现

    这篇文章主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-18

  • 纯CSS实现导航栏下划线跟随滑动效果

    这篇文章主要介绍了纯CSS实现导航栏下划线跟随滑动效果,需要的朋友可以参考下
    2018-03-29

  • 使用CSS制作立体导航栏

    这篇文章主要介绍了使用CSS制作立体导航栏的相关资料,需要的朋友可以参考下
    2017-10-16

  • CSS导航栏及弹窗示例代码

    本篇文章主要介绍了CSS导航栏及弹窗示例代码，导航栏和弹窗是在web中应用很广泛的，非常具有实用价值，需要的朋友可以参考下。
    2017-01-10

  • 纯CSS实现导航栏Tab切换效果

    CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
    2016-10-13

  • CSS利用伪元素实现导航栏斜线分隔

    这篇文章主要介绍了CSS利用伪元素实现导航栏斜线分隔的相关资料
    2016-03-14

  • 基于html和CSS3制作简单侧边导航栏

    本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
    2016-02-25

最新评论

关注微信公众号

扫一扫