如何使用CSS制作立体导航栏

这篇文章主要介绍如何使用CSS制作立体导航栏，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司提供高防服务器租用、云服务器、香港服务器、温江服务器托管等

    
        
        
        
        
    
    
        
        
首页
        
个人简介
        
作品集
        
博客
        
资源
        
联系我
        
    

效果图：

1

2

总结：

1、body部分用无序列表

2、（1）hover

鼠标移上时的效果。

（2）疑问::before和:before的区别

简单来说单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

以上是“如何使用CSS制作立体导航栏”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！