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 ...
随机推荐
- js自定义对象 (转)
原文地址:https://sjolzy.cn/js-custom-object.html 29 March 2010 9:53 Monday by 小屋 javascript进阶之对象篇 一,概述 在 ...
- 搭建svn管理平台
安装svn服务器:yum -y install subversion 创建svn的目录:mkdir -p /data/svn 初始化svn目录:svnadmin create /data/svn co ...
- 获取一个表中的字段总数(mysql) Navicat如何导出Excel格式表结构 获取某个库中的一个表中的所有字段和数据类型
如何获取一个表中的字段总数 1.function show columns from 表明: 结果 : 2.functiuon select count(*) from INFORMATION_SCH ...
- ssm框架搭建出现的异常:The import org.springframework cannot be resolved
1.检查是否有这个包;是否在maven依赖中添加了spring-context.,检查后我有这个包,而且在仓库中找到了 2.怀疑没有下完整,将其删除又导了一遍,还是报错. 3.后来重启了一遍eclip ...
- TransactionScope小例
1 public static class DataTableHelper { public static List<T> ToModel<T>(this DataTable ...
- 1140 Look-and-say Sequence (20 分)
Look-and-say sequence is a sequence of integers as the following: D, D1, D111, D113, D11231, D112213 ...
- ECharts 雷达图怎么在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
- iptables 深入分析
四表五链四表:filter , nat, manager, raw五链: 五个HOOK点的链接,pre_rout, foward, post_rout, in ,out 问题:内核如何匹配,内核使能 ...
- linux中终端字体样式显示不正常
问题:Centos终端中,字体显示不正常,中间感觉有空格,空格和单词傻傻分不清. 解决办法: yum groupinstall "Chinese Support" yum grou ...
- vue项目echarts画布删除历史数据重新渲染数据
vue用到echarts时,根据select多选下拉框进行echarts折线图渲染.发现折现只能增加不能减少,后来根据echarts API文档发现 调用方式: chart.setOption(opt ...