今天我们学习一级导航栏和二级导航栏的输写

一、一级导航

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代表自动这里的widthauto代表div宽度就是页面宽度height高度,这里我们设置的就是div标签高度为60像素backgroundcolor指的是背景颜色,这里设置的就是div标签背景颜色为青色。

让我们看一下网页效果图

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

 #aa>ul li指的是div标签aa的子元素ul的子元素li,>就是子代选择,也就是下一级元素

listsytlenone 代表去除无序列表前面的点

float 是浮动标签,floatleft代表每个列表向左浮动

width:20% 是每个列表占据div标签20%的宽度(因为我们设立了5个列表,所以每个列表都有      20%的宽度

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

textaligncente是指每个列表的内容在它的范围内水平居中

lineheight:60px 是指每个列表的内容在它的范围内垂直居中(列表的高度为多少,这个就设多  少,这样就可以达到垂直居中效果

fontsize:25px 指的是列表中文字的大小为25像素

让我们看看效果图

8.设置a标签的属性

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

text-decoration:none这行代码的作用就是去除a标签的下划线

 colorred  把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里面加入displaynone

displaynone指的是隐藏起来

displayblock指的是显示出来

第一行代码意思就是将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.我们设置隐藏属性

设置之前我们要修改一个代码:

修改

 

 其实我们就加入一个标签nthchild(1),这里的意思就是ul的第一个子元素,里面的数字写几就是第几个子元素,之前的代码表示ul标签的所有li子元素,如果还是这样写,会造成错误发生,所以我们必须告诉html这具体是哪个属性

接着,我们使用同样的标签设置隐藏属性:

 

 我们看一下效果图:

8.加上层级

因为我们使用定位将同样的标签放在同一位置,所以为了防止发生错误,我们必须加上层级(z-index:;)在里面填入数字数字越大,层级越高,也就是优先级越高,这样他会优先显示层级高的元素,我们分别在div标签bb和div标签cc里面加入层级:

 

 接着,我们在这里再放上层级:

 

 这里的意思就是我把bb和cc都设置成0层级,然后当我鼠标放在bb时,bb的层级就会变成10,而cc的层级还是0,这样就会优先显示bb;cc也是同理(注:前提是元素必须有定位才可以使用)。

 这样我们的二级导航栏制作完成,其实对比前面,主要是加了个定位,其他属性一样;如果想要制作后面的一级导航栏里面的二级导航栏,只需要将定位里的left调整就行。

完整代码奉上:

 

当然,还有一种情况,我们也能看到一种导航栏:一级导航是竖着的,二级导航栏在右边显示,其实它的原理和我们制作原理相同,只是位置和定位发生改变而已,我奉上我制作的一个简单案例大家可以参考一下

代码:

效果图:

 

鼠标放在首页的二级导航栏时:

 

鼠标放在新闻资讯的二级导航栏时:

 

下面的三个一级导航栏没有做,同理是一样的,只改变定位的位置就可以。 

好啦,这就是我们二级导航栏的制作,是不是很简单,只要弄懂原理,信手拈来!

注:以上背景颜色均可换成背景图片,如有不会插入背景图片或者出现错误,可以看我发的上一篇文章或者直接私信我,我会在看到的第一时间帮助你解决问题

我们下期见!

原文地址:https://blog.csdn.net/Snowyufly/article/details/131775444

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_11611.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注