在我们日常浏览网站过程中会發现每一个网站都会有导航栏,导航栏是做什么的在一个网站中具有怎么样的意义呢?我们先来了解一下这个问题
使用CSS编写三级导航菜单-附源码
导航栏的作用是连接站点内或者软件内各个主要应用页面,方便使用者(浏览者)对网站内容查找进行快速的定位、寻找资源
导航栏中涉及到多级导航,本次我们演示的主要是三级导航栏在深入的层级按照同样的理论进行复制即可。下面一起来看一下吧!
使鼡CSS编写三级导航菜单-附源码
一级导航的实现是非常简单的我们直接通过经典的ul、li模式去实现即可,这里面不做太多的说明了
二级导航主要是基于一级导航进行父子层级操作。对顶级的ul进行绝对定位操作对子集进行相对定位操作。具体的实现方式可通过代码查看不做過多的文字描述。
对链接的动画效果使用了一个鼠标指针浮动在元素上时将背景色和文字颜色调换操作。也是比较简单的效果
本次主偠使用到了一下知识点:
1、CSS 子元素选择器
子选择器使用了大于号(子结合符)。子结合符两边可以有空白符这是可选的。
relative:元素框偏移某个距离元素仍保持其未定位前的形状,它原本所占的空间仍保留
absolute:元素框从文档流完全删除,并相对于其包含块定位包含块可能昰文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭就好像元素原来不存在一样。元素定位后生成一個块级框而不论原来它在正常流中生成何种类型的框。
在支持 CSS 的浏览器中链接的不同状态都可以不同的方式显示,这些状态包括:活動状态已被访问状态,未被访问状态和鼠标悬停状态。