div+css完成带箭头的面包屑导航栏栏

日期：2021-03-17 类型：科技新闻 

关键词：网站建设，创建网站，免费建站平台，智能建站，企业建网站

制做好看美观大方的面包屑导航栏栏

在刚开始以前，我要照样子写一写给大伙儿科普1下啥叫面包屑导航栏栏

相近于下面这几种的

首页>栏目页>文章内容网页页面

首页/栏目页/文章内容网页页面

能够告知浏览者她们现阶段在网站中的部位和怎样回到的DOM叫面包屑导航栏栏

可是。。。。。。

你不感觉这个不太好看吗？

假如哪1天，你们企业的UI给你1张图，图里的面包屑导航栏栏是这样的

这样的

又或是别的带图案设计的面包屑导航栏栏，这时候候应当如何做？

将会有盆友说这个简易，so easy，立即找个图案设计给导航栏栏加background就可以了

但是，真的有这么简易吗？好，空话很少说，让大家立即刚开始动手能力实践活动1下，看究竟该怎样进行这类高颜值的面包削导航栏栏

1、先用无编码序列表做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;
            }

这时候候的网页页面实际效果是这模样的

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

的确是有难题，可是难题在哪儿？

左右图1比照，难题出在哪儿里马上就清晰了，每个导航栏（除最终1个）的>是堆在相邻的下1个导航栏的身上的，那末这个情况下，大家只必须给li标识加1个margin-left:⑴5px;便可以了，实际编码以下

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: ⑴5px;
            }

因为1开的宽度没给充足，因此这里我略微加了下li的宽度，再加以后，大家的面包屑导航栏栏就变为了这个模样

咦？大家的箭头呢？

说好的箭头呢？

第1⑷的箭头去哪了？

让大家再度倒回上1步实际操作，大家上1步实际操作是给li标识加margin-left：⑴5px;

前端开发的物品有个特点，后边写的特性一般会遮盖前面的特性，而dom构造尽管不容易遮盖，可是当二者部位重合时，在沒有加z-index特性以前，或该特性值相同的情况下，后写的dom构造会在上面

这里也更是这类状况，因此大家只必须在li标识上，独立再加不一样的z-index便可（要要想z-index特性起效，务必先加精准定位，position:relative）

这里对z-index的值沒有是多少限定，但仅有1点，那便是最终1个li标识是最少的，以此类推，慢慢递增，第1个是最大的。

最后编码是这模样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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: ⑴5px;
                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>

以上便是本文的所有內容，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，另外也期待多多适用脚本制作之家！

上一篇：莱芜建立网站之SEO提升中较难做的地区有什么？ 返回下一篇：没有了