首页 > 代码库 > 纯CSS实现面包屑式导航

纯CSS实现面包屑式导航

参考别人的教程,模仿了一下,效果图:093431pemopowogwoowszp.jpg (391×188)

 

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实现面包屑式导航