Ⅰ、问题描述：
使用html+css实现简易导航栏；
**要求：**将导航栏分成八个小部分，并在鼠标放上并不点击，导航栏背景颜色显示为黄绿色；
Ⅱ实现过程如下：
1、运行软件VScode，亲测可实现；
2、运行代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}/* 上语句意思：将div盒子外边距和内边距清零，防止系统会默认值；有没有此语句不太影响结果；*/ul {list-style: none;}/* 上语句意思：将ul列表的默认样式取消；如果没有此语句，则结果在导航栏中很可能有小黑点；*/.box {width: 960px;height: 40px;margin: 100px auto;}/* 上语句意思：给div盒子定义宽度为960px;高度为40px;在屏幕居中，外边距为100px的居中；*/.box ul {overflow: hidden;}/* 上语句意思：给div盒子下的ul盒子来设置隐藏属性；隐藏属性作用：清除子盒子可能产生的浮动，以便按照要求设置导航栏为8个部分；*/.box ul li {width: 120px;height: 40px;float: left;font-size: 18px;text-align: center;font-family: "Microsoft Yahei";line-height: 40px;}/* 上语句意思：设置div盒子的ul盒子的子盒子li的属性值；宽度为120px;高度为40px;浮动值为靠左浮动；子号为18px;文字对齐为居中；文字类型为“微软雅黑”行高为40px;*/.box ul li a {display: block;background-color: #ccc;color: #666;text-decoration: none;}/* 上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；" display: block;"：将行内元素变成块级元素；设置背景颜色为"#ccc"；字体颜色为"#666";文本修饰为无；*/.box ul li a:hover {background-color: yellowgreen;color: #fff;font-weight: bold;}/* 上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；(设定当鼠标放在导航栏背景颜色变化值)变化后的背景颜色为"yellowgreen"【黄绿色】；变化后的字体颜色为"#fff"【白色】；变化后的字体粗细为"bold"【加粗】；*/</style></head><body><div class="box"><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><li><a href="#">首页</a></li></ul></div></body></html>
3、结果展示：
放鼠标之前：
当鼠标放在导航栏第一个“首页”之后：
Ⅲ、当没有看懂时：
不妨翻翻我之前的笔记与例子哦！ 还请大佬们多多指点和交流！
