Fork me on GitHub

制作一个导航条

正在学习前端的路上,写点东西分享一下吧。

导航条比较简单就可以实现,我实现出来的效果是这样的。

如图
如图

我这里的这个比较ugly了,请原谅我这个辣鸡!毕竟才刚开始学习啊QAQ。
具体实现过程

具体实现过程

这里要用到的标签有nav>ul>li标签

1
2
3
4
5
6
7
8
9
10
11
<nav>
<ul>
<li><a href="#">材料类</a></li>
<li><a href="#">数学类</a></li>
<li><a href="#">计算机类</a></li>
<li><a href="#">社会学</a></li>
<li><a href="#">哲学</a></li>
<li><a href="#">玄学</a></li>
<li><a href="#">女装</a></li>
</ul>
</nav>

body里面的标签是这个样子的。这里暂时用空标签代替链接之。

然后我们开始添加css标签。
首先设置nav的宽度和高度,这里先设置一下轮廓的background-color。
代码为

1
nav{width: 800px;height: 40px;background-color: rgb(73, 52, 196);}

然后设置nav标签下的ul标签

1
2
//ul主要就是决定我们的轮廓所处于的位置。
nav ul{margin: 0px;padding: 0;}//设置外边距和内边距都为0.当然也可以设置成其他的值。

在设置ul标签下的li标签。
这里我们知道的是li标签里里面元素是个块状元素,它的每一个成员都会填充满整行。要设置成导航栏的形式我们就要使他们全都浮动在一起,这里我们可以使用float也可以直接改变块状元素的显示方式。float:left和display: inline-block都是可以让填充为每行的元素以单行的形式显示出来。
当然这里同时也要去掉li前面的那个小圆点。(使用life-style可以改变小圆点的格式)

1
nav ul li{float: left;list-style: none;} //这里我们用none就可以把小圆点去掉了。

设置完li之后我们就开始设置li标签下的a标签字体。当然还要记得把a标签字体下面的线去掉。
使用text-decoration就可以设置文本的下划线是否存在的样子,然后把字体设置成我们理想的状态,字体改成比较规矩的微软雅黑型号。

1
nav ul li a{color: #fff;text-decoration: none;padding: 10px;font:1.2em/40px microsoft yahei;}

把这些东西设置完成之后,我们就开始设置鼠标悬停时候的样子啦。
鼠标悬停是的块快的颜色设置为蓝色,然后字体颜色也可以自己设置一下。

1
nav ul li a:hover{background-color: rgb(120, 174, 199);color: #002b76}

在某陈姓大佬的要求下,那我就把源代码贴出来爽爽。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
nav{width: 800px;height: 40px;background-color: rgb(73, 52, 196);}
nav ul{margin: 0px;padding: 0;}
nav ul li{float: left;;list-style: none;}
nav ul li a{color: #fff;text-decoration: none;padding: 10px;font:1.2em/40px microsoft yahei;}
nav ul li a:hover{background-color: rgb(120, 174, 199);color: #002b76}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">材料类</a></li>
<li><a href="#">数学类</a></li>
<li><a href="#">计算机类</a></li>
<li><a href="#">社会学</a></li>
<li><a href="#">哲学</a></li>
<li><a href="#">玄学</a></li>
<li><a href="#">女装</a></li>
</ul>
</nav>
</body>
</html>

总结

Trouble is only opportunity in work clothes. –H.J.Kaiser.

-------------本文结束感谢您的阅读-------------