效果：
代码：
html文件：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>作业1</title><link rel="stylesheet" href="zuoye1.css"/></head><body><div class="box"><div class="top"><span><div><a href="" class="top-a">首页</a></div><div><a href="" class="top-a">产品列表</a></div><div><a href="" class="top-a">关于我们</a></div><div><a href="" class="top-a">成功案例</a></div><div><a href="" class="top-a">联系我们</a></div></span></div><div class="middle"><a href="" class="middle-a">首页</a>>><a href="" class="middle-a">产品首页</a></div><div class="bottom"></div></div></body></html>
css外部样式表：
*{margin: 0px; padding: 0px; border: 1px;}.box{/* 最外部盒子 */width: 100%;}span div{display: inline-block;}span div:hover{background-color: #A3F178;}.top{background-color: #eee;width: 80%;height: 40px;margin: auto;margin-top: 50px;text-align: center;line-height: 40px;/* 让div中内容垂直居中 */}.top a{margin-left: 25px;margin-right: 25px;}a:hover{background-color: #a3f178;}.middle{margin-top: 30px;margin-bottom: 30px;border: 1px solid #000;width: 165px;}.bottom{width: 805px;height: 425px;background: url(zuoye1.PNG) repeat;/* 忘了 */}.top a,.middle a{text-decoration: none;color: brown;}a:hover{background-color: #A3F178;}
zuoye1.PNG：
注意：
1.设置div高度与行高相同：line-height: 40px;/* 可以让div中内容垂直居中 */
2.repeat；repeat-x；repeat-y 是图片的重复方式。
如果觉得《【前端】html+css实现鼠标悬浮变色导航栏 hover【HTML+CSS+JavaScript(JS)】》对你有帮助，请点赞、收藏，并留下你的观点哦！
