纯CSS实现面包屑式导航

浏览数：36 / 时间：2015年06月09日

参考别人的教程，模仿了一下，效果图：

 

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为空的情况，否则显示不出来

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style src html log http si it for class style src html log http si it for

相关文章

随机文章

您可能还喜欢

您可能还喜欢