1.CSS导航栏
垂直
水平
导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
2.导航栏==链接列表
作为标准的HTML基础一个导航栏是必须的，在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
- list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
- 移除浏览器的默认设置将边距（margin）和填充（padding）设置为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<p>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>
</body>
</html>
3.垂直导航栏
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link,a:visited {
display: block;
padding: 4px;
width: 120px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: white;
background-color: seagreen;
}
a:hover,a:active {
background-color: limegreen;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
4.激活当前导航条
在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightgrey;
}
li a {
display: block;
color: #000000;
padding: 6px 15px;
text-decoration: none;
}
li a.active {
background-color: green;
color: white;
}
li a:hover:not(.active) {
background-color: dimgray;
color: white;
}
</style>
</head>
<body>
<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>
5.创建链接并添加边框
可以在 <li> or <a> 上添加 text-align:center 样式来让链接居中。
可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加 border-bottom 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: whitesmoke;
border: 1px solid dimgrey;
}
li a {
display: block;
color: #000000;
padding: 6px 15px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid dimgrey;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #008000;
color: white;
}
li a:hover:not(.active) {
background-color: dimgrey;
color: white;
}
</style>
</head>
<body>
<h2>垂直导航条</h2>
<p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
6.全屏高度的固定导航条
创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
height: 100%;
overflow: auto;
position: fixed;
background-color: darkgray;
}
li a {
display: block;
text-decoration: none;
padding: 8px 15px;
color: #000000;
}
li a.active {
background-color: #008000;
color: white;
}
li a:hover:not(.active) {
background-color: dimgrey;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div style="margin-left:15%; padding:1px 16px; height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 15%. This is because the side navigation is set to 15% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
7.水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: dodgerblue;
}
li {
float: left;
}
li a {
display: block;
text-decoration: none;
text-align: center;
padding: 15px 16px;
color: white;
}
/*li a:hover {
background-color: skyblue;
}*/
li a:hover:not(.active) {
background-color: skyblue;
color: white;
}
.active {
background-color: #008000;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
<!--
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li style="float: right;"><a class="active" href="#about">关于</a></li>
-->
</ul>
</body>
</html>
将4个列表项换成代码中注释部分的时候，将会出现如下结果：👇👇👇
8.在导航条之间添加分割线
<li> 通过 border-right 样式来添加分割线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
}
li {
float: left;
border-right: 1px solid papayawhip;
}
li:last-child {
border-right: none;
}
li a {
display: block;
text-align: center;
text-decoration: none;
padding: 15px 16px;
color: white;
}
li a:hover:not(.active) {
background-color: orange;
color: white;
}
.active {
background-color: #1E90FF;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li style="float:right"><a href="#about">关于</a></li>
</ul>
</body>
</html>
9.将导航栏固定在顶部（top：0;）或底部（bottom：0;）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
position: fixed;
overflow: hidden;
background-color: black;
top: 0;
/*bottom: 0;*/
}
li {
float: left;
}
li a {
display: block;
text-align: center;
text-decoration: none;
padding: 14px 16px;
color: white;
}
li a:hover:not(.active) {
background-color: red;
color: white;
}
.active {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div style="padding:20px; margin-top:30px; background-color:#1abc9c; height:1500px;">
<!-- 当使用代码第19行的注释时，可将上方div内联样式中的第二个换成margin-bottom:30px;
此时运行结果网页的导航栏将位于底部 -->
<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>
</div>
</body>
</html>
将代码中的第18行用第19行的注释替换，同时根据代码第51行的注释，修改div标签中的内容，即可得到如下的运行结果：👇👇👇
