CSS
navbar 导航栏vertical navbar 垂直导航栏horizontal navbar 水平导航栏overflow: hiddennavbar 导航栏
易用的导航对于任何网站都很重要
通过使用 CSS 可以将无聊的 HTML 菜单转换为美观的导航栏
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础
在我们的实例中，将用标准的 HTML 列表构建导航栏
导航栏基本上就是链接列表，因此使用
和 元素会很有意义
<!DOCTYPE html><html><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><p class="note"><span>注释:</span>将href="#'用于测试链接，在实际网站中使用的是URL</p></body></html>
从列表中删除项目符号及其默认的外边距和内边距（填充）
ul {list-style-type: none;margin: 0;padding: 0;}/*list-style-type: none; - 删除项目符号，导航条不需要列表项标记设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置上例中的代码是垂直和水平导航栏中使用的标准代码*/
vertical navbar 垂直导航栏
/* 构建垂直导航栏可以在列表中设置 <a> 元素的样式背景色被添加到链接以显示链接区域注意整个链接区域都是可单击的而不仅仅是文本 display: block*/ul {list-style-type: none;margin: 0;padding: 0;width: 60px;}li a {display: block;width: 60px;background-color: #dddddd;}/*display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度*/
垂直导航栏实例
创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色
<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;}/*Change the link color on hover*/li a:hover {background-color: #555;color: white;}</style></head><body><h1>垂直导航栏</h1><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body></html>
当前导航链接
向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上
<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;}li a.active {background-color: #4CAF50;color: white;}li a:hover:not(.active) {background-color: #555;color: white;}</style></head><body><h1>垂直导航栏</h1><p>在此例中创建一个具有绿色背景色和白色文本的 "active" 类<br>该类将添加到 "Home" 链接</p><ul><li><a class="active" href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body></html>
居中链接以及添加边框
/*把 text-align:center 添加到 <li> 或 <a>，使链接居中将 border 属性添加到 <ul>，在导航栏周围添加边框如果还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外*/ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;border: 1px solid #555;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;}li {text-align: center;border-bottom: 1px solid #555;}li:last-child {border-bottom: none;}li a.active {background-color: #555;color: white;}li a:hover:not(.active) {background-color: #555;color: white;}
全高固定垂直导航栏
创建全高的“粘性”侧面导航
body {margin: 0;}ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;}li a {display: block;color: #000;padding: 8px 16px; /*margin也行，但是显示效果会不同，可以自己尝试*/text-decoration: none;}li a.active {background-color: #4CAF50;color: white;}li a:hover:not(.active) {background-color: #555;color: white;}/*尝试滚动此区域，并查看 sidenav 如何粘在页面上此 div 元素的左外边距为 25％。这是因为侧导航栏被设置为 25％ 宽如果删除这个外边距，则 sidenav 将叠加到该 div 上还要注意，我们已为 sidenav 设置 overflow：auto如果 sidenav 太长时（例如，如果其中有超过 50 个链接），会添加滚动条*/
horizontal navbar 水平导航栏
有两种创建水平导航栏的方法：使用行内或浮动列表项
/*行内列表项构建水平导航栏的一种方法是，除了“标准”代码外，还要将 <li> 元素指定为 inline：*/ul {list-style-type: none;margin: 0;padding: 0;}li {display: inline;}/*display: inline; - 默认情况下，<li> 元素是块元素在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行*/
浮动列表项
/*创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局如果未指定 !DOCTYPE，则浮动项目可能会产生意外结果背景色被添加到链接以显示链接区域整个链接区域都是可单击的，而不仅仅是文本overflow:hidden 被添加到 ul 元素，以防止 li 元素超出列表float: left; - 使用 float 使块元素滑动为彼此相邻display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）padding: 8px; - 使块元素更美观background-color: #dddddd; - 为每个元素添加灰色背景色如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素*/ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;}li {float: left;}li a {display: block;padding: 8px;text-decoration: none;background-color: #dddddd;}li a:hover {background-color: #555;color: white;}
水平导航栏实例
创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色
<!-- ul中的margin是调整ul块级元素距离页面的外边距ul中的padding则是调整ul块级元素与其子元素的内边距，删掉之后还会由于子元素外边距的存在而含有间隙距离overflow: hidden 这句代码非常重要--><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover:not(.active) {background-color: #111;}.active {background-color: #4CAF50;}</style>
右对齐链接
通过将列表项向右浮动来右对齐链接（float:right;）
<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover:not(.active) {background-color: #111;}.active {background-color: #4CAF50;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li style="float: right"><a class="active" href="#about">About</a></li></ul></body></html>
边框分隔栏
/*将 border-right 属性添加到 <li>，以创建链接分隔符*//* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;border-right: 1px solid #bbb;}li:last-child {border-right: none;}li a {display: block;color: white;text-align:center;text-decoration: none;padding: 14px 16px;}li a:hover:not(.active) {background-color: #111;}.active {background-color: #4CAF50;}
固定导航栏
使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此
/*固定的顶部导航栏滚动页面以查看效果页面滚动时导航栏将位于页面顶部*/body {margin: 0;}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: fixed;top: 0; /*否则会留有上部空隙*//* bottom: 0; 固定在底部 *//* 固定定位在移动设备上可能无法正常工作 */width: 100%;}li {float: left;}li a {display: block;text-align: center;text-decoration: none;color: white;padding: 14px 16px;}li a:hover:not(.active) {background-color: #111;}.active {background-color: #4CAF50;}
粘性导航栏
/*为 <ul> 添加 position: sticky;，以创建粘性导航栏粘性元素会根据滚动位置在相对和固定之间切换它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）Internet Explorer、Edge 15 和更早版本不支持粘性定位Safari 需要 -webkit- 前缀还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用*/body {font-size: 28px;}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: -webkit-sticky; /* Safari */position: sticky;top: 0;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover {background-color: #111;}.active {background-color: #4CAF50;}
响应式上导航栏
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {margin: 0;}ul.topnav {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}ul.topnav li {float: left;}ul.topnav li a {display: block;color: white;text-align: center;text-decoration: none;padding: 14px 16px;}ul.topnav li a:hover:not(.active) {background-color: #111;}ul.topnav li a.active {background-color: #4CAF50;}ul.topnav li.right {float: right;}@media screen and (max-width: 600px) {ul.topnav li.right,ul.topnav li {float: none;}}</style></head><body><ul class="topnav"><li><a class="active" href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><div style="padding: 0 16px;"><h1>响应式顶部导航栏实例</h1><p>此示例使用媒体查询在屏幕尺寸小于或等于 600 像素时垂直堆叠 topnav</p><p>之后将学到有关媒体查询和响应式 Web 设计的更多知识</p><p><b>调整浏览器窗口大小来查看效果</b></p></div></body></html>
overflow: hidden
overflow: hidden 拥有三个作用
超出边框部分隐藏清除浮动解决边框塌陷
1
overflow: scroll 显示滚动条
overflow: auto 超出显示滚动条
2
当不给父级元素设置高度的时候，其内部元素浮动后会导致下面的元素顶上
这是因为子元素浮动后脱离标准流，从而不占位，而父元素检测不到子元素的大小，高度为0
