导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>导航栏</title></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></div></body></html>
这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。
从列表中删除边距和填充：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>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></div></body></html>
例子解析：
- list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
- 移除浏览器的默认设置将边距和填充设置为0
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title> 横向导航条页面居中的方法</title><style>ul{list-style-type: none;border: 1px solid red;margin: 10px;padding: 10px;}</style>
</head>
<body>
<ul><li><a href="###">产品中心</a></li><li><a href="###">仿古系列</a></li><li><a href="###">木纹砖系列</a></li><li><a href="###">仿古系列</a></li><li><a href="###">木纹砖系列</a></li>
</ul>
</body>
</html>对比上述两个例子可以很好的理解margin和padding【从列表中删除边距和填充】
垂直导航栏
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>li{display: block; /*每个列表项作为一块，单独占一行*/background-color: lightblue;}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></div></body></html>
示例说明：
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
- width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
垂直导航条实例
创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>a{display: block;background-color: lightblue;}ul{list-style-type: none;margin: 0;padding: 0;width: auto;background-color: #f1f1f1;}li a{display: block;color: #000;padding: 8px 16px;text-decoration: none;}li a:hover{ /*设置鼠标移动到选项时候的背景颜色和字体颜色*/background-color: coral;color: white;}</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></div></body></html> 
激活/当前导航条实例
在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>a{display: block;}ul{list-style-type: none;margin: 0;padding: 0;width: auto;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><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></body></html> 
创建链接并添加边框
可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。
可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>a{display: block;}ul{list-style-type: none;align-content: center;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;border: 1px solid black;border-top:none;}li{text-align: center;border: 1px solid black;border-bottom: none;border-right: none;border-left: none;}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><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></body></html>因为<ul>标签中的边框会和<li>的边框重合，为了美观我把四个方向的边只留了一条
全屏高度的固定导航条
接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
关键在于<ul>标签的height设置为%【全屏高度】且必须确定位置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style>a{display: block;}ul{list-style-type: none;margin: 0;padding: 0;width: 25%;height: 100%;background-color: #f1f1f1;position: fixed;overflow: auto;}li{text-align: center;}li a{display: block; /*这个block其实没什么用，因为块和浮动是矛和盾，互相无法限制*//*此处去掉block之后，在li中设置line-height或者height效果基本类似*/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><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></body></html>
水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内联列表项
建立一个横向导航栏的方法之一是指定元素， 下述代码是标准的内联:
li
{display:inline;
}
- display:inline; - 默认情况下，<li> 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul{list-style-type: none;padding: 0;margin: 0;}li{background: greenyellow;float: left;padding: 10px;}a{display: block;width: auto;background: #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><a href="#about">About</a></li></ul>
</body>
</html>
- float:left - 使用浮动块元素的幻灯片彼此相邻
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度【如果不用block也可以，只需要在li中使用padding效果差不多】
- width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
HTML文件在写的时候，我们在布局的时候经常会忘记他们有许多透明的边框，以及各种居中问题困扰着我，一番询问后，得到了一下答案。我们需要在一个地方将所有的东西装到一个最外层的容器中去，这个就需要按照我们的需求去定义，比如在制作页面时，设定一个最外层的宽度，然后margin设置为auto【居中】这样把我们想要的这一部分塞进去，就会获得一个整洁的页面。
固定导航条
可以设置页面的导航条固定在头部或者底部：
顶部:
ul {position: fixed;top: 0;width: 100%;
}底部:
ul {position: fixed;bottom: 0;width: 100%;
}
