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