越往后面这速度就降低下来了，前面的简单可以快速过去。
<!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>水平导航栏</title><style>/* 固定导航栏 */body {margin: 0;}/* 固定导航栏 */ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;/* 5 灰色水平导航条 背景颜色，主要修改这里改变颜色。改变想要的颜色 */background-color: #f3f3f3;/* 固定导航栏 */position: fixed;top: 0;width: 100%;/* 固定导航栏 */}li {float: left;}li a {display: block;color: #666;text-align: center;padding: 14px 16px;text-decoration: none;}/* 鼠标悬停后变颜色.不能有空格，有空格不管用哦 *//* li a:hover {background-color: rgb(204, 20, 20);} *//* 激活选中 */.active1 {background-color: #4cafaa;}.active {background-color: #4CAF50;}li a:hover:not(.active) {background-color: rgb(207, 29, 29);}</style></head><body><p>1 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。</p><p>2 激活/当前导航条实例</p><P>3 链接右对齐</P><p>4 固定导航条</p><p>5 灰色水平导航条</p><ul><li><a class="active1" href="#home">2 主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li style="float: right;"><a href="#about">3 about</a></li></ul><h1>Fixed Top Navigation Bar</h1><h2>Scroll this page to see the effect</h2><h2>The navigation bar will stay at the top of the page while scrolling</h2><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p></body></html>
效果
如果觉得《CSS导航栏 水平导航栏出炉》对你有帮助，请点赞、收藏，并留下你的观点哦！
