CSS 面包屑导航栏

青旅半醒 2022-07-14 22:48 303阅读 0赞

先看一下效果图  
![导航][20161025094243437]

1.首先写好`HTML`代码

<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

这里只是写一个例子，为了方便就不添加`id`和`class`,直接为标签添加样式，在项目中要为`ul`加一个`class`或者`id`来区分标签。

先去掉标签的默认样式

*{ padding: 0; margin:0; }
    ul{ margin-left: 100px; list-style:none; }

然后为li和a标签添加样式：

li{ position: relative; float:left; background: #8ECC2B; width:100px; height: 50px; font-size: 26px; line-height: 50px; text-align: center; margin-right: 30px; }
    li a{ display: inline-block; width:100%; height:100%; text-decoration: none; color: #FFFFFF; }

因为要用到`li`标签的`before`和`after`伪元素，伪元素要根据`li`进行定位，所以要将li的`position`属性设置为`relative`。

这个时候的效果是这样的：  
![效果][20161025095457808]

接下来为li元素添加after伪元素，位置为了li标签的后面，是一个三角形，代码如下

li:after{ content: ""; display: inline-block; position: absolute; left:100px; width:0; height:0; border:transparent; border-left:20px solid #8ECC2B; border-top:25px solid transparent; border-bottom:25px solid transparent; }

这个时候的效果如下：  
![效果][20161025095803333]

然后为li设置一个before伪元素，位置为了li标签的前面，形状是正好将前一个li的after的三角形相反，这里不太好描述，因为我也不知道这是什么形状，O(∩\_∩)O哈哈~，代码如下：

li:before{ content: ""; display: inline-block; position: absolute; left:-20px; width:0; height:0; border-left: 20px solid transparent; border-top: 25px solid #8ECC2B; border-bottom:25px solid #8ECC2B; }

这个时候的效果如下：

![效果][20161025100402884]

这个时候导航就基本完成了，接下来就是把第一个标签的before和最后一个元素的after去掉就可以了：

li:first-child:before{ display: none; }
    li:last-child:after{ display: none; }

看看效果如何：

![导航][20161025100621713]

基本完成了，好像不是很好看，可以给第一个和最后一个加上圆角的效果：

li:first-child{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
    li:last-child{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

这时候一个导航就完成了：

![效果][20161025100829343]

是不是很奇怪按步骤做的效果图和这篇文章的第一张效果图有点不一样呢，因为第一张图是我盗别人的。

[20161025094243437]: /images/20220715/bb35516687034736a9df8ceeaa8a6347.png
[20161025095457808]: /images/20220715/7adcae986c5d43ff9399eee99773f723.png
[20161025095803333]: /images/20220715/c5df369495984da9a8b7c09299292f70.png
[20161025100402884]: /images/20220715/12f595599b664338a0c3ac6ba2269e50.png
[20161025100621713]: /images/20220715/3435170c9f164edf820b5160333113cc.png
[20161025100829343]: /images/20220715/d00c067d5ff94ccabef4be2d6c29317a.png