使用CSS制作立体导航栏html+css+js实现导航栏滚动渐变效果不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS中的导航栏和下拉菜单的实现纯CSS实现导航栏下划线跟随滑动效果div+css实现带箭头的面包屑导航栏CSS导航栏及弹窗示例代码纯CSS实现导航栏Tab切换效果CSS利用伪元素实现导航栏斜线分隔基于html和CSS3制作简单侧边导航栏

css制作的立体导航栏，具体实现代码如下所示：

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

效果图：

总结：

1、body部分用无序列表

2、（1）hover

　　　　鼠标移上时的效果。

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

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

　　　　w3c关于css选择器的规范：

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

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

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

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

总结

以上所述是小编给大家介绍的使用CSS制作立体导航栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！