CSS 实现面包屑导航
面包屑导航(Bread Crumbs Navigation)是一种辅助和补充的导航方式,非常适合展示站点的层级关系,能帮助用户明确当前所处的位置,并方便地提供返回的路径。
面包屑的概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,为了不在森林里迷路,他们就在沿途走过的地方都撒下面包屑,让这些面包屑帮助他们找到回家的路。
由此可知,面包屑导航可以让用户清楚了解当前所处位置,以及当前页面在整个网站中的位置,并帮助用户快速学习和了解网站内容和组织方式,从而形成很好的位置感,还能提供返回各个层级的快速入口,方便用户操作,提高用户体验,从而降低网站的跳出率。
更重要的是,面包屑导航对网站的SEO非常有利,因为它增强了网站的内链建设,搜索引擎蜘蛛只需沿着这个链实施抓取就可以了,非常方便。
最常见的面包屑导航是横向的文字链接,并用大于号“>”分开,这个符号也暗示了链接之间的层级关系。当然,也可以使用其他符号,如 “»”、“/”、“→”等,选择什么符号主要取决于网站的美学设计。
面包屑导航的制作方法非常简单,只需创建一个容器,并在容器中创建面包屑导航的链接即可。为了方便应用样式,可以把大于号放在 span 元素中。
<div class="breadcrumbs">
<a href="#">买房无忧</a><span>></span>
<a href="#">上海二手房</a><span>></span>
<a href="#">发布出售房源</a>
</div>
由于导航中的所有链接都在一行内水平显示,为了美观,将容器的高度和行高设置为相同的值,以便容器中的内容能够垂直居中。
.breadcrumbs {
height: 36px;
line-height: 36px;
}
由于面包屑是一种辅助导航,在页面中,它不应该起支配作用。因此,链接文本不应该太突出,也相对较小。可以将整个导航中文本的颜色设置为浅黑色,字体大小设置为 12px,字体设置为宋体。
.breadcrumbs {
color: #666;
font-size: 12px;
font-family: simsun;
}
并将链接的颜色也设置为浅黑色,并去掉链接的默认下划线。当用户鼠标悬停在链接上时,通过改变链接的颜色,来提醒用户。
.breadcrumbs a {
color: #666;
text-decoration: none;
}
.breadcrumbs a:hover {
color: #f60;
}
此时预览,发现链接文本和大于号挤在一起,影响美观。可以通过 span 元素的外边距,让链接文本和大于号之间保持适当的距离。
.breadcrumbs span {
margin: 0 10px;
}
至此,面包屑导航基本制作完成。运行结果如图 6‑7 所示:
图6-7 面包屑导航
从上图可以看出,整个导航中只包含文本,略显单调。可以在整个导航的开头添加一幅表示主页的图像,来丰富链接的内容,使它不至于那么单调。可以通过一个 img 元素来直接插入图像,也可以通过容器的背景图像来间接插入图像。
两种方法的效果完全相同,只是方法不同而已,这里使用背景图像。要为容器添加背景图像,还要为容器设置左内边距,来为背景图像腾出空间,以防背景图像和文本发生重叠。
.breadcrumbs {
…
padding-left: 20px;
background: url(img/home.jpg) left 10px no-repeat;
}
插入图像后,整个导航就不那么单调了。运行结果如图 6‑8 所示:
图6-8 面包屑导航
事实上,在实际应用中,网站的风格千变万化,面包屑导航的外观也是千变万化,但万变不离其宗,制作方法都是大同小异。比如,苹果商店的面包屑导航如图 6‑9 所示:
图6-9 苹果商店的面包屑导航
要制作这样的面包屑导航也很简单,它只是将 span 元素中的大括号用类似大括号的图像进行替换而已。这个导航实现思路也很简单:
首先,创建导航中的链接。如果一个元素中没有任何内容,其宽度就会收缩为 0,背景图像就无法显示出来。因此,要将 span 元素中的大括号用空格代替。
<div class="breadcrumbs">
<span> </span><a href="#">Shop iPod</a>
<span> </span><a href="#">iPod Accessories</a>
<span> </span><a href="#">Power</a>
</div>
其次,为容器添加边框,并设置合适的圆角。
.breadcrumbs {
…
border-radius: 6px;
border: 1px solid #e5e5e5;
}
最后,将 span 元素的 display属性设置为 inline-block,并设置宽度,再应用模拟大括号的背景图像。
.breadcrumbs span {
margin: 0 6px;
width: 20px;
display: inline-block;
background: url(img/crumbs_bg.png) left top no-repeat;
}
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
CSS 实现面包屑导航相关推荐
- css面包屑导航_在CSS3中编写优美的面包屑导航菜单
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 导航菜单和链接可能是Web布局中最重要 ...
- 一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...
- 前端学习(1917)vue之电商管理系统电商系统之绘制面包屑导航和卡片视图调用api获取数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- 前端学习(1916)vue之电商管理系统电商系统之绘制面包屑导航和卡片视图
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- Bootstrap 面包屑导航
面包屑导航 面包屑导航(Bread Crumbs Navigation)是一种辅助和补充的导航方式,非常适合展示站点的层级关系,能帮助用户明确当前所处的位置,并方便地提供返回的路径. Bootstra ...
- Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
- 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善
如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?phpnamespace Home\Model;use Think\Model;class CategoryMode ...
- Bootstrap 面包屑导航(Breadcrumb)
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...
- bootstrap框架之面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置 Bootstrap 中的面包屑导航(B ...
- 15. 徽章 和 面包屑导航
1.徽章 (Badge) <!--dabge 是基类 badge-* 可调颜色 --> <!--dabge 是基类 badge-* 可调颜色 --> <h1>zsp ...
最新文章
- 如何部署自动驾驶系统
- openfiler setup一,安装
- 大数据将改变信息生命周期管理
- Android C组件的经济意义
- 如何迭代pandas dataframe的行
- C# 与 LUA 的经验对比
- Runtime使用单例模式,饿汉式
- 我的世界服务器物品id错误,我的世界错误代码,怎么弄
- mysql 冗余外键 同步_由于外键约束导致mysql同步出问题的故障
- C++ 集成和派生练习题解答
- unity, 内置shader下载地址
- C++ 接口继承与实现继承的区别和选择
- java反射机制历史_java的反射机制浅谈
- mysql linux查看配置文件my.cnf位置
- 【教程】Edraw Max(亿图图示)基本操作图文详解
- 给mBlock添加扩展模块
- pdf文件过大怎么办?3种免费压缩PDF的方法
- java移位运算符(一个大于号,两个大于号,三个大于号)
- 还在为日程安排发愁?是因为你没有使用飞项
- 一个漂亮的暗系色调网站主页,外表美观。