首先先上图:
因为公司的设计师对这种外观的面包屑导航有着执着的爱好。作为一个前端人员当然需要最大化的实现设计图的展示效果,最开始考虑的是用图片来实现,根据文字字符长短的变化,必须要切很长的图片。而后说需要做半透明的效果,一改透明度,发现三角形那块能够看得清下面的那个层,瞬间晕倒。
一直琢磨着能否用css3来做,试了一下,效果还不错。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3三角形面包屑导航</title> <style type="text/css"> *{ margin:0; padding:0;} .breadnav{ margin:100px 10px;} ul li{ float:left; list-style:none; height:40px;} ul li a{ border-left: 20px dashed transparent; height:0; line-height:0; color:#fff; float:left; padding:0 20px; text-decoration:none; text-transform:uppercase; font-family:Arial; font-size:12px; } ul li.home a{ background:#222; border-bottom: 20px solid #222; border-top: 20px solid #222; } ul li.subnav1 a{ background:#222; border-bottom: 20px solid #036daa; border-top: 20px solid #036daa;} ul li.subnav2 a{ background:#036daa; border-bottom: 20px solid #038ddc; border-top: 20px solid #038ddc;} ul li.subnav3 a{ background:#038ddc; border-bottom: 20px solid #41b4f6; border-top: 20px solid #41b4f6;} ul li.last a{ background:#41b4f6; border-bottom: 20px solid #fff; border-top: 20px solid #fff;} </style> </head> <body> <ul class="breadnav"> <li class="home"><a href="#">Home</a></li> <li class="subnav1"><a href="#">category</a></li> <li class="subnav2"><a href="#">prolist</a></li> <li class="subnav3"><a href="#">prodetail</a></li> <li class="last"><a href="#"></a></li> </ul> </body> </html>
备注:该效果支持火狐、谷歌、Safari、IE8以上。设置导航半透明的话,直接设置外面的 li 的opacity值就可以了。
本文发布于2014年07月22日12:07
,已经过了3934天,若内容或图片失效,请留言反馈
转载请注明出处: 皮哈皮阿
本文的链接地址: https://blog.phpat.com/dev/425.html
-
emlog主题模板 beginning 更新至v2.6.1
最近更新:更新到v2.5.7
2017/08/02
-
element-ui Radio 单选框组件默认值选不中?
请求中为数字/布尔的字段要多加注意,类型问题会导致很多bug出现。
2019/02/12
-
基于emlog开发的微信小程序开源了
基于emlog开发的微信小程序
2018/01/18
-
emlog模版仿小米论坛版本: V2.0
仿小米论坛版本更新V2.0,本次暂时更新这样了,以后会持续更新优化的。
2012/08/07
-
element-ui el-table 表格疯狂抖动跳动不停
element-ui el-table 表格疯狂抖动跳动不停, 这究竟是道德的沦丧还是人性的毁灭.~~
2019/07/11
-
Windows7程序图标无法锁定到任务栏的解决办法
2012/07/19

2017-08-04 10:20
emlog简约社区模版发布了。
今天的你,戴口罩了吗? 没戴?小心病毒安排你跳社会摇!🕺 记得勤洗手,冲掉坏运气~ 积极防护,保护自己,晴天咱们一起当人群里最靓的仔!✨
2019加油!钱包要鼓,头发要多,烦恼要少,快乐要爆。愿你工作摸鱼得潇洒,生活撒欢得漂亮!别怕,宇宙都在暗中支持你!
人生真的是多姿多彩
不是每朵白云,都会带来真情;不是每个拥抱,都会面带微笑;不是每次思念,都能立刻兑现;不是每个朋友,都在身边守候;不是每个日子,都逢良辰吉时。国庆节到了,愿你节日快乐!
昨天和今天有什么不同
经朋友提示,Beginning模板一周年了,恭喜。 好事总会发生,敬请期待更好的作品
beginning模板越来越好了[耶]
2018是个新的开始
“生命是属于每个人自己的感受,不属于任何别人的看法。”