首页 > 代码库 > 纯CSS实现面包屑式导航
纯CSS实现面包屑式导航
参考别人的教程,模仿了一下,效果图:
html:
<div id="crumbs"> <ul> <li><a href="#">Breadcrumb</a></li> </ul></div>
css:
#crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff;} #crumbs ul li a:after{ border-top: 40px solid transparent; border-left: 40px solid #3498db; border-bottom: 40px solid transparent; content: ‘‘; position: absolute; right: -40px; top: 0; } #crumbs ul li a:before{ border-top: 40px solid #3498db; border-left: 40px solid transparent; border-bottom: 40px solid #3498db; content: ‘‘; position: absolute; right: 180px; top: 0; }
注:即使content无设置任何字符,也需要写出content为空的情况,否则显示不出来
纯CSS实现面包屑式导航
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。