参照着教程做了一个面包屑式的导航。在这里分享一下实现方式,自己也在温习一下。首先效果如图:
我们用一个无序列表来填充面包屑导航。每一个导航连接都相当于一个内嵌了<a>元素的<li>元素。
首先将每一个a元素渲染为蓝色的矩形框。文本居中放置,两边加上适当的内边距。设置<a>元素为相对定位。这样它的绝对定位的子元素可以相对于它来进行定位。
使用:after选择器创建一个元素。使用css边框来生成一个三角形。给使用:after选择器生成的元素应用上下边框,左边框,然后把上下边框的颜色设置成透明的。在将该元素放置到合适的地方(通过position:absolute),注意设置z-index
设置上下边框为透明,重新设置左边框的颜色后
HTML代码如下:
我们用一个无序列表来填充面包屑导航。每一个导航连接都相当于一个内嵌了<a>元素的<li>元素。
首先将每一个a元素渲染为蓝色的矩形框。文本居中放置,两边加上适当的内边距。设置<a>元素为相对定位。这样它的绝对定位的子元素可以相对于它来进行定位。
![222048583719482.jpg 222048583719482.jpg](http://bbs.html5cn.org/data/attachment/forum/201410/23/0932414fpf0caacfji107c.jpg)
使用:after选择器创建一个元素。使用css边框来生成一个三角形。给使用:after选择器生成的元素应用上下边框,左边框,然后把上下边框的颜色设置成透明的。在将该元素放置到合适的地方(通过position:absolute),注意设置z-index
![222057351836526.jpg 222057351836526.jpg](http://bbs.html5cn.org/data/attachment/forum/201410/23/093317znpy6kk6ic6k22c6.jpg)
设置上下边框为透明,重新设置左边框的颜色后
![222059195122820.jpg 222059195122820.jpg](http://bbs.html5cn.org/data/attachment/forum/201410/23/093355fcrrfhgg3hergepz.jpg)
使用同样的方法,在矩形框的左边渲染一个三角形样式。这一次还是设置:before元素的上下边框为透明,设置左边框的颜色和页面的背景色一致,伪装成页面的一部分
此次一个完整的面包屑导航就完成了。翻译水平还是有待提升。。。
附上原文地址:http://line25.com/tutorials/how- ... rumb-links-with-css
via:http://www.cnblogs.com/submerge/archive/2014/10/22/4044341.html