共计 4461 个字符，预计需要花费 12 分钟才能阅读完成。
今天我们来学习一级导航栏和二级导航栏的输写
一、一级导航栏
1. 首先我们先建立好 html 文件和 css 文件，并使其关联起来。
这里的 href 就是指 css 的路径，./ 指的是同级目录，如果 css 文件不在同一级，就可以使用 ../ 找上一级目录，直到找到 css 文件，我们以 a 来命名 css 文件。（这里推荐额外创建一个 css 文件，也就是外部样式表，也可以在 head 里面通过 style 标签编辑（内部样式表），或者在 body 里面每个元素中使用 style 标签编辑（行内样式表），后俩种不推荐，因为对于初学者可能会很混乱，而且不美观）
2. 在 html 文件，body 中创建 div 标签，并取名：
div就是块标签，我们可以在里面编辑内容，id就是 类选择器 ，类选择器也可以使用 class 命名，不同的是 class 可以有很多同名，可以同时修改内容，而 id 只可以有一个名字，是独一无二的存在。id=“aa” 的意思就是我们将这个 div 标签命名为 aa，我们就可以在 css 文件中使用 #aa{} 来编辑内容。
3. 在 div 标签中创建无序列表，并在每个列表建立链接：
ul就是无序列表（无序列表就是没有序号标注的列表），然后在无序列表中建立列表 li，并在每个li 中建立 链接（a 标签），这里教给大家一个便捷方法，在建立完 ul 标签后，我们可以在 ul 里边输入这样一行代码 li*5>a 然后直接点回车（enter），这句话的意思就是创建 5 个 li 标签，并在每个 li 标签中创建 a 链接，同理，你想创建几个就把 5 改成几，如果不想要 a 链接，就直接去掉>a，直接写 li* 5 就可以了。
4. 在 a 标签中输入我们要输入的一级导航栏内容：
这里我们 必须在 a 标签输入 ，只有这样才能把它设置成一个链接，a 标签中的 href 就是 网址 ，举个例子，加入我们 a 标签的内容是百度，我们就需要在 href 中输入 http://www.baidu.com，这样我们就可以在网页中点击百度跳转到百度页面，同理，如果跳转的是我们内部文件，就需要使用./ 或../查找到内部文件，盘符文件需要从盘符开始写，一级一级的写，不可以跳过。这里我就不写网址了，你们做实例的时候可以加上
我们看一下网页效果图：
接着我们就开始操作 css
5. 先在 css 里面去除外边距和内填充
*代表全局选择器，margin代表外边距，也就是块与块之间的距离，设置为 0 就表示距离为 0 像素；padding代表内填充，代表着边框（border）与内容（content）之间的距离，同上为 0 像素；这里放上框架图更直观一点
6. 设置我们的 div 标签大小与颜色
width指宽度，auto代表自动，这里的 width：auto 代表 div 的宽度就是页面的宽度；height指高度，这里我们设置的就是 div 标签高度为 60 像素；background-color指的是背景颜色，这里设置的就是 div 标签背景颜色为青色。
让我们看一下网页效果图：
7. 设置 li 标签的各项属性
#aa>ul li指的是 div 标签 aa 的子元素 ul 的子元素 li，>就是 子代选择器，也就是下一级元素
list-sytle：none 代表去除无序列表前面的点
float 是浮动标签，float：left代表每个列表向左浮动
width：20% 是每个列表占据 div 标签 20% 的宽度（因为我们设立了 5 个列表，所以每个列表都有 20% 的宽度）
height：60px 是指每个列表的高度为 60 像素
text-align：center 是指每个列表的内容在它的范围内水平居中
line-height：60px 是指每个列表的内容在它的范围内垂直居中（列表的高度为多少，这个就设多 少，这样就可以达到垂直居中的效果）
font-size：25px 指的是列表中文字的大小为 25 像素
让我们看看效果图：
8. 设置 a 标签的属性
我们直接使用a{}，这样就可以选择 html 中的所有 a 标签，不存在上下级关系；
text-decoration：none；这行代码的作用就是去除 a 标签的下划线
color：red 把 a 标签的文字替换成红色（只能在这里替换，不可用子元素或其他的元素，因为 a 标签本身自带颜色，其他地方改都无效）
看看效果图：
9. 设置鼠标指针放在上面的变化：
hover指鼠标放在上面的变化；
li：hover指鼠标放在 li 标签上的变化，这里我们设置的是鼠标放在 li 标签上，背景颜色变成橙色；
a：hover指鼠标放在 a 链接上的变化，这里我们设置的是鼠标放在 a 链接上，文字变为绿色，并且 字体大小变为 30 像素。
效果图如下：
鼠标放在 li 标签上：
鼠标放在 a 链接上：
至此，我们的一级导航栏完成，下面我放上完整代码，然后我们开始在原有的基础上进行二级导航栏。
一级导航栏完整代码：
二、二级导航栏（基础）
1.html 添加二级导航栏内容
我们在第一个 li 标签里添加一个 div 标签，将其命名为bb，并在里面创建 3 个无序列表（注意，这个 li 标签里面的 a 标签“首页” 不可以 放在 div 标签 bb 里面，如果放进去会变成 bb 的子元素）
我们看一下效果图：
2. 设置 div 标签 bb 的框架
因为我们的 div 标签 bb 是第一个 li 标签“首页”的子元素，所以我们填入 100%继承li 标签“首页”的宽度；我们创建了 3 个 li 标签，每个高度设置为 60 像素，所以 div 标签 bb 整齐高度为 180 像素，接着设置背景颜色 backgrou-color 为蓝色。
继承：如果我们没有设置子元素的属性，子元素将会继承父元素的文本样式
效果图如下：
3. 隐藏和显示二级导航栏：
我们在 #bb 里面加入 display：none；
display：none指的是隐藏起来
display：block指的是显示出来
第一行代码意思就是将 bb 隐藏起来
#aa>ul>li:hover #bb这串代码冒号前半段指的是 aa 的子元素 ul 的子元素 li 标签，hover 指的是鼠标 放在上面的状态，图片中这个代码的整体意思就是当鼠标放上去 bb 的父级元素 li 标签时，显示二级导航栏
效果图如下：
鼠标不放在上面时：
鼠标放在首页时的变化：
鼠标放在二级导航栏 222 的变化：
鼠标放在二级导航栏 222 的 a 标签上的变化：
原数代码奉上：
当然，这只是一个简单的二级导航栏，我们平时见到的二级导航栏一点开都有很多链接，不止有竖的，还有很多横向的链接，下面我们就学习如何制作横向二级导航栏
三、二级导航栏（扩展）
1. 创建足够多的 li 标签
我们就按照 5 * 3 的布局，在原有的基础上多建立 12 个标签，达成 15 个，以便分布均匀
我将网页页面缩小 50% 看一下效果图：
2. 我们修改一下之前的代码
将 #bb 里面的 width 改为 具体数值：
这是我们页面的宽度因为我们这个 div 标签 bb 是首页 li 标签的子元素，所以 100% 会继承 li 标签的宽度，我们只有改成具体数值才可以实现 div 标签宽度的变化（宽度可以用多个工具测量，比如截图工具）
将鼠标放到首页上看一下效果图：
将 #aa>ul>li 改为#aa>ul li
>代表的子代，而 空格 代表的是 后代，原来的代码代表的是 ul 的下一级元素中的 li 标签，改成空格就变成了 ul 包含的所有 li 标签
我将鼠标放在首页上看一下效果图：
将鼠标放在 888 的标签上面
3. 然后，我们加上浮动和宽高
最后一个代码必须加上，这是固定搭配，这样可以防止全部设置浮动元素后，父级框架崩溃
4. 修饰一下棱角（可修可不修）
在 #aa{}，#aa>ul li{}，#bb{} 这三个里面加入border-radius: 20px;
这里的像素最多可以放 4 个像素，分别代表着左上角，右上角，右下角，左下角，各位可以根据自己需求分别设定，我这里只写一个代表 4 个角同时设定 20 像素
效果图如下：
5. 我们制作新闻资讯的二级导航栏
同理，我们先创建 div 标签和 li 标签;
这里我们将 div 标签命名为 cc
接着我们在 css 里面设置好属性：
和上一个 div 标签 bb 一样的格式：
这里是效果图：
大家可以看到我们新闻资讯的二级导航栏位置不对，这是因为我们的二级导航栏的父元素是新闻资讯，所以他俩的起始位置是一样的，接下来我们要把他固定到最左侧，这将用到我们的定位属性。
6. 定位
首先我们在要定位的元素的父级元素加上 相对定位 （position：relative；），我们要给新闻资讯的二级导航栏定位，它的父级元素是 li 标签，因为我们必须使用 绝对定位（position：absolute；），如果不给父级元素增加定位的话，它就会根据窗口定位，这让我们操作起来会很麻烦，父级元素设置相对定位，只要不设置偏移值它就原地不动，不会造成影响。
我们在这里加上这一行代码，我们之前说过，这里是给 div 标签 aa 的子元素 ul 里面的所有后代元素 li 设置属性，我们要用到定位的元素的父元素也属于这里。
然后我们就加上绝对定位：
这里我们的 left：-258px 指的是向左偏移负 258 个像素，我们说过，二级导航栏和一级导航栏的起始位置相同，所以我们应该向左移动，并且是 -258px，我们一个单元格的宽度就是 258px，让我们看看效果图：
7. 我们设置隐藏属性：
设置之前我们要修改一个代码：
将
修改为
其实我们就加入一个标签：nth-child（1），这里的意思就是 ul 的第一个子元素，里面的数字写几就是第几个子元素，之前的代码表示 ul 标签的所有 li 子元素，如果还是这样写，会造成错误发生，所以我们必须告诉 html 这具体是哪个属性
接着，我们使用同样的标签设置隐藏属性：
我们看一下效果图:
8. 加上层级
因为我们使用定位将同样的标签放在同一位置，所以为了防止发生错误，我们必须加上层级（z-index：；）在里面填入数字，数字越大，层级越高，也就是优先级越高，这样他会优先显示层级高的元素，我们分别在 div 标签 bb 和 div 标签 cc 里面加入层级：
接着，我们在这里再放上层级：
这里的意思就是我把 bb 和 cc 都设置成 0 层级，然后当我鼠标放在 bb 时，bb 的层级就会变成 10，而 cc 的层级还是 0，这样就会优先显示 bb；cc 也是同理（注：前提是元素必须有定位才可以使用）。
这样我们的二级导航栏制作完成，其实对比前面，主要是加了个定位，其他属性一样；如果想要制作后面的一级导航栏里面的二级导航栏，只需要将定位里的 left 调整就行。
完整代码奉上：
当然，还有一种情况，我们也能看到一种导航栏：一级导航是竖着的，二级导航栏在右边显示，其实它的原理和我们制作的原理相同，只是位置和定位发生改变而已，我奉上我制作的一个简单案例，大家可以参考一下
代码：
效果图：
鼠标放在首页的二级导航栏时：
鼠标放在新闻资讯的二级导航栏时：
下面的三个一级导航栏没有做，同理是一样的，只改变定位的位置就可以。
好啦，这就是我们二级导航栏的制作，是不是很简单，只要弄懂原理，信手拈来！
注：以上背景颜色均可换成背景图片，如有不会插入背景图片或者出现错误，可以看我发的上一篇文章或者直接私信我，我会在看到的第一时间帮助你解决问题。
我们下期见！
原文地址:
