css导航栏怎么制作
的有关信息介绍如下:有时候我们使用css制作页面的时候,想做页面的导航栏,怎么做呢,下面来分享一下方法
第一步在我们的电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none;是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化,如下图所示:
第二步我们在html页面body里面编写导航栏内容,可以看到是通过
的格式来实现导航栏,完整代码如下图所示:第三步我们在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏,如下图所示:
第四步我们将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化,如下图所示:
第五步我们也可以制作成水平导航栏,overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏,float: left;使导航栏水平显示,完整代码如下图所示:
第六步我们在浏览器中打开页面,可以看到制作出美观的水平导航栏,如下图所示: