＜CSS＞一级导航栏和二级导航栏

首页
css
正文

一、一级导航栏

这里的h ref就是指css的路径，./指的是同级目录，如果css 文件不在同一级，就可以使用../找上一级目录，直到找到css 文件，我们以a来命名 css 文件。（这里推荐额外创建一个 css 文件，也就是外部样式表，也可以在head 里面通过style 标签编辑（内部样式表），或者在body 里面每个元素中使用 style 标签编辑（行内样式表），后俩种不推荐，因为对于初学者可能会很混乱，而且不美观）

2.在html 文件，body中创建 div 标签，并取名：

d i v就是块标签，我们可以在里面编辑内容，id就是类选择器，类选择器也可以使用 class 命名，不同的是class 可以有很多同名，可以同时修改内容，而id只可以有一个名字，是独一无二的存在。id=“aa”的意思就是我们将这个d i v 标签命名为aa，我们就可以在css 文件中使用#aa{}来编辑内容。

3.在d i v 标签中创建无序列表，并在每个列表建立链接：

ul就是无序列表（无序列表就是没有序号标注的列表），然后在无序列表中建立列表li，并在每个li中建立链接（a标签），这里教给大家一个便捷方法，在建立完ul标签后，我们可以在ul里边输入这样一行代码li*5&g t;a 然后直接点回车（ent er），这句话的意思就是创建5个li 标签，并在每个li 标签中创建a链接，同理，你想创建几个就把5改成几，如果不想要a链接，就直接去掉&g t;a，直接写li*5就可以了。

4.在a标签中输入我们要输入的一级导航栏内容：

这里我们必须在a标签输入，只有这样才能把它设置成一个链接，a标签中的h ref就是网址，举个例子，加入我们a标签的内容是百度，我们就需要在h ref中输入http://www.baidu.com，这样我们就可以在网页中点击百度跳转到百度页面，同理，如果跳转的是我们内部文件，就需要使用./或../查找到内部文件，盘符文件需要从盘符开始写，一级一级的写，不可以跳过。这里我就不写网址了，你们做实例的时候可以加上

我们看一下网页效果图：

接着我们就开始操作 css

5.先在css里面去除外边距和内填充

*代表全局选择器，margin代表外边距，也就是块与块之间的距离，设置为0就表示距离为0像素；padding代表内填充，代表着边框（border）与内容（content）之间的距离，同上为0像素；这里放上框架图更直观一点

6.设置我们的d i v标签大小与颜色

width指宽度，auto代表自动，这里的wi dt h：auto代表d i v的宽度就是页面的宽度；height指高度，这里我们设置的就是d i v标签高度为60像素；background–color指的是背景颜色，这里设置的就是div标签背景颜色为青色。

让我们看一下网页效果图：

7.设置li标签的各项属性

#aa&g t;ul li指的是div标签aa的子元素ul的子元素li，&g t;就是子代选择器，也就是下一级元素

list–sytle：none 代表去除无序列表前面的点

float 是浮动标签，float：left代表每个列表向左浮动

widt h：20% 是每个列表占据div标签20%的宽度（因为我们设立了5个列表，所以每个列表都有 20%的宽度）

height：60px 是指每个列表的高度为60像素

text–align：cent er 是指每个列表的内容在它的范围内水平居中

lin e–height：60px 是指每个列表的内容在它的范围内垂直居中（列表的高度为多少，这个就设多少，这样就可以达到垂直居中的效果）

fon t–size：25px 指的是列表中文字的大小为25像素

让我们看看效果图：

8.设置a标签的属性

我们直接使用a{}，这样就可以选择 html中的所有a标签，不存在上下级关系；

text-de c oration：none；这行代码的作用就是去除a标签的下划线

color：red 把a标签的文字替换成红色（只能在这里替换，不可用子元素或其他的元素，因为a 标签本身自带颜色，其他地方改都无效）

看看效果图：

9.设置鼠标指针放在上面的变化：

hover指鼠标放在上面的变化；

li：hover指鼠标放在li标签上的变化，这里我们设置的是鼠标放在li标签上，背景颜色变成橙色；

a：hover指鼠标放在a链接上的变化，这里我们设置的是鼠标放在a链接上，文字变为绿色，并且字体大小变为30像素。

效果图如下：

鼠标放在li标签上：

鼠标放在a链接上：

至此，我们的一级导航栏完成，下面我放上完整代码，然后我们开始在原有的基础上进行二级导航栏。

一级导航栏完整代码：

二、二级导航栏（基础）

1.html 添加二级导航栏内容

我们在第一个li标签里添加一个div标签，将其命名为b b，并在里面创建3个无序列表（注意，这个li标签里面的a标签“首页”不可以放在div标签b b里面，如果放进去会变成b b的子元素）

我们看一下效果图：

2. 设置div标签bb的框架

因为我们的div标签bb是第一个li标签“首页”的子元素，所以我们填入100%继承li标签“首页”的宽度；我们创建了3个li标签，每个高度设置为60像素，所以div标签bb整齐高度为180像素，接着设置背景颜色back grou-color为蓝色。

继承：如果我们没有设置子元素的属性，子元素将会继承父元素的文本样式

效果图如下：

3.隐藏和显示二级导航栏：

我们在#bb里面加入display：none；

display：none指的是隐藏起来

display：block指的是显示出来

第一行代码意思就是将bb隐藏起来

#aa>ul>li:h ov er #bb这串代码冒号前半段指的是aa的子元素ul的子元素li标签，hov er指的是鼠标放在上面的状态，图片中这个代码的整体意思就是当鼠标放上去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标签命名为c c

接着我们在css里面设置好属性：

和上一个div标签bb一样的格式：

这里是效果图：

大家可以看到我们新闻资讯的二级导航栏位置不对，这是因为我们的二级导航栏的父元素是新闻资讯，所以他俩的起始位置是一样的，接下来我们要把他固定到最左侧，这将用到我们的定位属性。

6.定位

首先我们在要定位的元素的父级元素加上相对定位（position：relative；），我们要给新闻资讯的二级导航栏定位，它的父级元素是li标签，因为我们必须使用绝对定位（position：absolute；），如果不给父级元素增加定位的话，它就会根据窗口定位，这让我们操作起来会很麻烦，父级元素设置相对定位，只要不设置偏移值它就原地不动，不会造成影响。