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 > 来实现导航栏, 完整代码如下图所示:
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
3, 在浏览器中打开页面, 可以看到已经制作成了一个比较美观的垂直导航栏, 如下图所示:
4, 将鼠标滑向垂直导航栏的列表项上, 可以看到列表项颜色发生变化, 如下图所示:
5, 也可以制作成水平导航栏
○ overflow: hidden; 代码的意思是超出高度和宽度的部分自动隐藏
○ float: left; 使导航栏水平显示, 完整代码如下图所示:
6, 在浏览器中打开页面, 可以看到制作出美观的水平导航栏, 如下图所示:
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15311.html