1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏,overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏,float: left使导航栏水平显示。
6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,已经置顶了。
设置3个导航nav,最右边的nav设置class=right,然后设置nav的css边距,宽,高,背景颜色(便于我们看见),再设置一个float为右就会靠右排列,注意:float时第一个会到右边,所以设置第一个为最右边的导航栏代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
nav{
margin: 5px
width: 100pxheight: 200px
background-color: red
float: right
}
</style>
</head>
<body>
<nav class="right">右</nav>
<nav>中</nav>
<nav>左</nav>
</body>
</html>