html导航栏鼠标放上去变色,css鼠标经过的导航栏效果

、问题描述：

　　使用html css实现简单的导航栏；

　　* *要求：* *把导航条分成八个小部分，放在鼠标上不用点击。导航栏的背景色是黄绿色；

　　:

实现过程如下：

　　 1.运行软件VScode，可以实现亲测；

　　2.运行代码：

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-widt h，initial-scale=1.0 title document/title style type= text/CSS * { margin:0；填充：0；}/*以上语句的含义：清除div框的内外边距，防止系统缺省值；缺少此语句不影响结果；*/ul { list-style:none；}/*上面这句话的意思：取消ul列表默认样式；如果没有这个语句，结果很可能是导航栏里有一个小黑点；*/.box { width:960 px；高度：40px边距：100px自动；}/*以上语句的含义：定义div框的宽度为960px身高40px屏幕中央，外边距100px*/.框ul {溢出：隐藏；}/*以上语句的含义：为div框下的ul框设置hidden属性；隐藏功能：清除子框可能的浮动，以便根据需要将导航栏设置成8个部分；*/.框ul li {宽度：120px高度：40px浮动：左；字体大小：18px文本对齐：居中；font-family:微软雅黑；行高：40px}/*以上语句的含义：设置div框ul框子框li的属性值；宽度为120px身高40px浮点值保持浮动；子编号为18px将文本居中对齐；文字类型为“微软雅黑”，行高为40px*/.盒ul阿利{显示：块；背景色：# ccc颜色：# 666；文字-装饰：无；}/*上述语句的含义：设置div框和li框的ul框的子框li的属性值；显示：块；将内联元素变成块级元素；将背景颜色设置为“# CCC”；字体为 # 666 ；文本被修改为无；*/.盒子ul阿利：悬停{背景色：黄绿色；颜色：# fff字体粗细：粗体；}/*上述语句的含义：设置div框和li框的ul框的子框li的属性值；(设置鼠标放在导航栏上时背景颜色变化值)变化后的背景颜色为‘yellow green’[黄绿色]；更改后的字体颜色为“# fff”[白色]；更改的字体粗细为“粗体”[bold]；*//style/head body div class= box ullia href= # 主页/a/li lia href=# 主页/a/li lia href=# 主页/a/li lia href=# 主页/a/li lia href主页/a/li lia href=# 主页/a/li lia href=# 主页/a/li lia href=# 主页/a/Li Li/ul/div/body/html 3。结果显示：

　　放鼠标之前：

　　当鼠标放在导航栏的第一个“主页”后面时：

　　关于用Html Css实现简单的导航条功能(导航条满足鼠标开关的背景色)的这篇文章就到此为止。更多相关的html导航条内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。