CSS 面包屑导航栏
来源:互联网 发布:乐清人民法院淘宝拍卖 编辑:程序博客网 时间:2024/05/20 01:46
做之前,先看一下效果图。
首先,书写好 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
阅读全文
0 0
- CSS 面包屑导航栏
- CSS 面包屑导航栏
- css实现面包屑导航
- HTML+CSS 实现面包屑导航
- 纯 CSS 实现面包屑导航
- 纯CSS实现面包屑式导航
- 纯 CSS 打造 Flow-Steps 面包屑导航
- BootStrap--CSS组件--面包屑导航(breadcrumb)
- 面包屑导航
- 面包屑导航
- 面包屑导航
- 面包屑导航
- 面包屑导航
- android面包屑导航栏的实现
- css 面包屑
- [学习笔记] bootstrap(六): nav导航栏和面包屑导航
- 面包屑导航的修改
- wordpress面包屑导航
- InfluxDB详解之TSM存储引擎解析(二)
- Eclipse在线安装主题(color theme)以及安装color theme第三方主题(图文)
- 剑指Offer_面试题08_旋转数组的最小数字
- Java基础补习Day6
- Error: Expected resource of type raw [ResourceType]
- CSS 面包屑导航栏
- matlab小程序:求矩阵的行列式
- 如何取消选择easyui-combogrid的下拉数据
- maven使用TestNG
- 错排列
- map()和reduce()的细节
- CodeForces 299 C.Weird Game(博弈论)
- PAT B1009.说反话
- SQL Server监控