演示：导航栏
导航栏
拥有易于使用的导航是任何网站的重要。
使用CSS您可以将枯燥的HTML菜单成好看的导航栏。
导航栏=链接列表
导航条需要标准的HTML作为基础。
在我们的例子中，我们将建立一个标准的HTML列表中的导航栏。
导航条基本上是一个链接列表，因此，使用<ul>和<li>元素非常有道理：
例
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
试一试» 现在让我们从列表中删除子弹和边距和填充：
例子解释：
-
list-style-type: none;-删除子弹。 导航栏不需要标记列表 - 设定
margin: 0;和padding: 0;删除浏览器的默认设置
在上面的例子中的代码是在垂直和水平导航栏使用的标准代码。
垂直导航栏
要建立一个垂直导航栏，可以将样式<a>列表中的元素中，除了上面的代码：
例子解释：
-
display: block;-显示的链接为块级元素，使得整个链接区域可点击（不仅仅是文本），它允许我们指定的width （和padding, margin, height等，如果你想） -
width: 60px;-块元素占用默认提供的全部宽度。 我们要指定一个60像素宽
您还可以设置宽度<ul>并删除宽度<a> ，当为块元素显示它们会占用全部可用的宽度。 这将产生同样的结果我们前面的例子：
垂直导航栏的例子
创建一个灰色的背景颜色基本垂直导航栏，当用户在他们的移动鼠标改变链接的背景色：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} 试一试» 主动/电流导航链接
添加“积极”级到目前的链接，让用户知道他/她所在的网页：
中心链接和添加边框
添加text-align:center到<li>或<a>居中的链接。
添加border属性<ul>周围添加导航栏的边框。 如果你也想在导航栏内边框，添加border-bottom到所有<li>元素，除了最后一项：
例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} 试一试» 全高固定的垂直导航栏
创建一个全高， "sticky"侧边导航：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} 试一试» 注意：这个例子可能无法在移动设备上正常工作。
水平导航栏
有两种方法来创建水平导航栏。 使用内联或浮动列表项。
内联列表项
建立一个横向导航栏的一个方法是指定<li>元素为内联，除了"standard"上面的代码：
例子解释：
-
display: inline;-默认情况下， <li>元素是块元素。 在这里，我们删除前行打破每个表项后，在一行中显示它们
浮动列表项
创建水平导航栏的另一种方式是浮动<li>元素，并指定导航链接的布局：
例子解释：
-
float: left;-使用浮动来获得块元素旁边彼此滑动 -
display: block;-显示的链接为块级元素，使得整个链接区域可点击（不仅仅是文本），它可以让我们（和指定填充height, width, margins ，如果你想等） -
padding: 8px;-由于块元素占用全部可用的宽度，他们不能彼此相邻浮动。 因此，指定一些填充，使它们看起来好 -
background-color: #dddddd;-灰色背景色添加到每个元素
提示：添加背景色，以<ul>而不是每个<a>元素，如果你想有一个全宽背景色：
水平导航栏的例子
创建一个黑暗的背景颜色的基本水平的导航栏，当用户在他们的移动鼠标改变链接的背景色：
例
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} 试一试» 主动/电流导航链接
添加"active"类目前的链接，让用户知道他/她所在的网页：
右对齐链接
右对齐的联系浮动的列表项的权利（ float:right; ）：
例
<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> 试一试» 边境分频器
添加border-right属性<li>创建链接分频器：
例
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} 试一试» 固定导航栏
使导航栏留在页面顶部或底部，用户滚动甚至当页面：
注：这些例子可能无法在移动设备上正常工作。
苍苍横导航栏
用薄灰色边框灰色的水平导航栏的一个例子：
更多示例
响应Topnav
如何使用CSS3媒体查询创建响应顶部导航。
响应Sidenav
如何使用CSS3媒体查询创建响应侧边导航。
下拉导航栏
如何添加一个下拉菜单的导航栏里面。