杂粮和面包屑

杂粮是我自己定义的：用来指代自己做的笔记。

杂粮

给button添加svg：http://www.fengyan.cc/1376.html
href中的两斜杠是代表什么意思，<link href="//static.hdslb.com/mobile/css/normalize.css" rel="stylesheet">
斜杠“/”是URL地址中用到的分隔符；对应地，双斜杠用在网络域名访问中，是协议和主机名或IP地址之间的分隔符，以双斜杠//开头的URL是依赖协议的URL表示形式，URL格式：协议://域名或ip/请求文件路径/文件名。

面包屑

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

     原理

在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这是一种“历史记录”的应用方式，目的是帮助你追溯来路，因而它应该是一种线性的导航方式。不过在网页的应用中，“追溯来路”这件事浏览器已经做得足够好了，所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的方式。但是一般正常的来讲目录结构由3层结构组成。分别是首页>栏目页>内容页。合理的构建目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目的权重不至于太分散。同时在许多关于网站用户使用体验的调查报告中也得出超过3次点击访客还没有找到需要的信息，访客就很大的可能性会离开网站。所以，3层目录结构也是浏览体验的需要。

适用条件

虽然眼下很多网站都流行使用面包屑导航，但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。2、独立不交叉的网站结构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。

    注意事项

    如果你觉得自己的移动端页面上要使用面包屑的话，那就意味着你的移动端网页设计出现问题了：可能是网站太复杂（嵌套层级过深），而这样一来，就不符合移动端的使用场景了。为了解决问题，你应当试图简化整个体系，确保面包屑不会出现在手机上。

  面包屑只是一个辅助导航系统，它无法替代主要的导航系统。请记住，它是仅仅是为了用户方便的次要选项，用来抵达其他层级的快速定位链接系统。它的功能并不复杂，增加易用性是它的主要作用，所以千万不要将面包屑复杂化。

  面包屑本身是一个辅助导航，如果使用过于花哨的字体和醒目的色彩，会使得它显得喧宾夺主，过于抓人眼球。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计并不差，但是它太过于醒目，甚至比顶部导航还能引起用户注意力。

  例子

参考资料：http://www.uisdc.com/breadcrumbs-for-websites-design

                  http://baike.baidu.com/item/%E9%9D%A2%E5%8C%85%E5%B1%91%E5%AF%BC%E8%88%AA?fr=aladdin