css - 面包屑导航一般怎么写【css选择器】

浏览: 202 发布日期: 2017-09-05 分类: css

面包屑导航条在设计开发过程中常被怱视,
事实上在某些场景中它能够加大增加网站的可用性
这有一篇译文介绍面包屑导航的使用价值
点击这里
本文仅适用于新手,可巩固选择器的使用方法

因此本文就介绍了3种常见的面包屑导航

1.Bootstrap 2.x版本中的样式

直接添加分隔号,也是最简单的

<ul class="breadcrumb"> 
  <li> 
    <a href="#">Home</a> <span class="divider">></span> 
  </li> 
  <li> 
    <a href="#">Tutorials</a> <span class="divider">></span> 
  </li> 
  <li class="active">HTML5</li> 
</ul> 

2.Bootstrap 3.x版本中的样式

它使用了css的相邻兄弟选择器:before选择器

极大减少了代码量,也更加智能

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

3.扁平化面包屑导航

  随着近些年CSS与CSS3的发展,有些东西我们可以纯用CSS去实现,
取代那些需要使用背景图片的老技术。在这篇教程中,我们将创建扁
平化的面包屑导航链接,不再需要使用之前流行的“推拉门式的背景图片”。

最终效果图

第一步

HTML代码

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

第二步

css部分开始

#crumbs ul li a { 
    display:block; 
    float:left; 
    height:50px; 
    background:#3498db; 
    text-align:center; 
    padding:30px 40px 0 40px; 
    position:relative; /*作为相对定位的父元素存在*/
    margin:0 10px 0 0;   
    font-size:20px; 
    text-decoration:none; 
    color:#fff; }

第三步

使用 :after 选择器添加一个右边的箭头样式、
为了表示更清晰,我保留了border-top和border-bottom并设置为红色
在第四步中删除

#crumbs ul li a:after { 
    content:"";   
    border-top:40px solid red; /*在第四步删除*/
    border-bottom:40px solid red; /*在第四步删除*/
    border-left:40px solid blue; /*在第四步删除*/
    position:absolute;
    right:-40px;
    top:0; 
}

第四步

使用正确的颜色我们得到了我们想要的形状
transparent 也是在css面试题中“写一个三角形”核心代码

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

第五步

和第三步、第四步同样的方法
使用 :before 选择器添加一个左边的镂空的箭头样式
这里的镂空其实是设置和背景色一样的颜色

#crumbs ul li a:before { 
    content:"";   
    border-top:40px solid transparent; 
    border-bottom:40px solid transparent; 
    border-left:40px solid #d4f2ff; /*颜色为背景色*/
    position:absolute;
    left:0;
    top:0; 
}

第六步

这个额外的三角形会影响文本的呈现,
不过一个简单的padding调整能够很快解决这一问题。

padding:30px 40px 0 80px;

第七步

HTML代码中添加内容

<div id="crumbs"> 
    <ul> 
        <li><a href="#1">One</a></li>
        <li><a href="#2">Two</a></li>
        <li><a href="#3">Three</a></li>
        <li><a href="#4">Four</a></li> 
        <li><a href="#5">Five</a></li> 
     </ul>
</div>

第八步

运用 :first-child 和 :last-child 选择器移除第一项和最后一项的三角,然后运用 border-radius 使边角变得圆滑一些,最后我们得到一个完整的面包屑导航列表。

#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 { 
    padding-right:80px; 
    border-top-right-radius:10px;
    border-bottom-right-radius:10px; 
} 
#crumbs ul li:last-child a:after { display:none; }

第九步

最后需要实现的就是链接的悬浮效果。不要忘记在悬浮状态时改变 border-left-color 这一属性,这样所有的面包屑都能改变颜色了。

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

读到这里恭喜你基本已经掌握了css选择器的使用

返回顶部