制作一个放导航栏的容器
制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
<div id="nav"></div>
显示结果
在浏览器中显示的结果为下图所示：
在容器中放入一些导航栏
导航栏代码如下:
<ul>
<li>模块一</li>
<li>模块二</li>
<li>模块三</li>
<li>模块四</li>
<li>模块五</li>
<li>模块六</li>
</ul>
为导航栏添加一些属性
<style type="text/css">
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;
}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}
</style>
导航栏在浏览器页面的显示结果如下图所示：
怎么去设计一个优秀的网站导航？
所周知，用户的第一印象非常之重要的，而导航栏设计就相当于用户的一个指引牌，用户进入你的网站最先看到的便是导航栏。如果一个网站想要成功吸引住用户并且在同行中脱颖而出，那么设计出一款优秀的网页导航栏就显得尤为重要。
网站导航(又称内部链接体系结构)是网站内连接页面的链接。网站导航的主要目的是帮助用户轻松地在您的网站上查找内容。搜索引擎使用您的网站导航来发现和索引新页面。链接可帮助搜索引擎了解目标页面的内容和上下文以及页面之间的关系。用户至上。这是您必须始终记住的网站导航的基本目标。
首先让用户满意。使导航变得容易。然后，在不损害用户体验的情况下优化搜索引擎。
1、放网站主页链接放置logo
很多网站会把首页链接放到导航logo里面，给用户点击，国内很多用户，包括国外的客户，都会默认认为导航的logo存在主页链接，很多时候都确实有效，同时把关键词放置到logo里面也可以适当给网站做优化处理。
2、主要和次要导航元素
顶部菜单可以是主要导航元素，而侧面菜单以及页脚和面包屑中的其他链接可以是辅助导航元素。
3、创建一个固定的网站菜单
固定的菜单将帮助您的访客随时找到需要的栏目部分;滚动时始终保持可见。这是使您的网站导航更加便捷的好方法。
4、隐藏一些不必要的链接
当网站导航出现重复链接的时候，有的用户再点击的时候会发生困惑，所以必须要把一些重复链接隐藏掉，添加将隐藏部分元素并仅通过单击显示它们的按钮。
5、使用JavaScript效果进行网站导航
有时，链接和网页是用JavaScript编写的。这是一个问题，因为搜索引擎很难找到用JavaScript创建的内部链接。
现在百度抓取JavaScript是可行的，很多大型网站或者是特效网站导航都是使用JavaScript特效来做，主要是为了能让导航更出色。
网站导航是用户体验和网站设计中最容易被忽视的方面之一。导航链接有时候可以引导用户直接点击到我们想要给他们展示的内容，这样我们的网站成交率会更高。
