CSS 面包屑导航栏
做之前,先看一下效果图。

首先,书写好 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;
}
- 设置
position
为relative
, 因为下面我们要用before, after
绘制效果。 - 设置高度为
30px
,padding-top
为10px
,所以这里元素的高度为40px
。
这个时候的效果如下所示。

#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;
}
现在的效果是这样的。

其实,我到现在还没明白其中的原理,为什么指定了上下左边框中间会有一个三角形出现?希望有明白原理的看到这篇文章能够解释一下。
以上颜色的设置只是为了观察,下面我们可以将上下边框设置为透明,将左边框设置为与 a
元素相同。
border-left: 20px solid #3498db;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
这个时候效果如下。

可见,效果已经出来了,利用相同的原理,我们绘制出左边的效果。
#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;
}
效果如下

好了,现在我们的效果就已经完成了,如果想要实现我们在开始时候展示的那种效果,我们就需要多写几个标签了,而且第一个元素和最后一个元素和中间的元素效果还是不一样的,下面我们来书写这段代码。
#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;
}
以上代码并不难懂,我就不在解释,这个时候的效果如下。

为了美观,最好还是为鼠标悬停设置一个背景改变的效果。
#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.
原文链接:http://www.jianshu.com/p/030a375934bf
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
CSS 面包屑导航栏的更多相关文章
- vue 2.0 + elementUI 实现面包屑导航栏
Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...
- css面包屑导航编号
content:counter(flag);counter-increment: flag;-->一般给导航条编号1,2,3
- 纯CSS3编写的面包屑导航收集
整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
- NEC学习 ---- 模块 -多行式面包屑导航
如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...
- 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善
如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...
随机推荐
- redis集群如何解决重启不了的问题
redis使用集群部署,如果遇到断电或者服务器重启,当再次启动的时候,有时候会启动不了.需要使用trib的fix命令进行修复.如果修复还是不行的话,可以清除节点数据再重新建集群,前提要备份之后操作. ...
- python3+Django1.11+mysql5.7 MySQL DB API Drivers
The Python Database API is described in PEP 249. MySQL has three prominent drivers that implement th ...
- 【BZOJ1047】[HAOI2007]理想的正方形 (倍增ST表)
[HAOI2007]理想的正方形 题目描述 有一个\(a*b\)的整数组成的矩阵,现请你从中找出一个\(n*n\)的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: ...
- HTTP原理 请求方法
HTTP的工作过程 一次HTTP操作称为一个事务,其工作过程分为四步: 1.客户机与服务器建立连接:客户单击某个超级链接,HTTP的工作开始,接下来进行TCP连接的三次握手过程. 2.建立连接后,客户 ...
- 二分答案 & 洛谷 P2678 跳石头
首先让我们先学一下二分答案这个东西... 二分答案,肯定与二分有关,还与可能是答案的东西有关... 二分答案的准确定义: 二分答案是指在答案具有单调性的前提下,利用二分的思想枚举答案,将求解问题转 ...
- Android 滚动视图(ScollView)
1.介绍 2.使用技巧 3.xml文件代码 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- R语言结果输出方法
输出函数:cat,sink,writeLines,write.table 根据输出的方向分为输出到屏幕和输出到文件. 1.cat函数即能输出到屏幕,也能输出到文件. 使用方式:cat(... , fi ...
- DP设状态 : 状压与线
[NOIP2017]宝藏(状压) [AHOI2009]中国象棋(状压) [BZOJ1814] URAL1519 Formula 1(插头\(DP\)模板) 新链接 : Luogu5056 , dark ...
- numpy-1
NumPy数组 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数据 大部分操作仅针对于元数据,而不改变底层实际的数据. 关于NumPy数组有几点必 ...
- POJ - 1456 贪心 堆常用操作 注意细节
题意:给定n个商品的deadline和profit,求每天卖一件的情况下的最大获利 显然是一道贪心 按deadline从小到大排序好,动态维护小根(profit)堆的大小<=当前deadline ...