1、首先，我需要进行初步的分析，导航栏可能会利用哪些html元素做成。随便打开任何一个导航网站的首页，QQ上网导航，或者hao123导航，在搜索附近总会有一个快捷导航的选项。初步看来，很像是一个单行表格，但利用表格布局显然不能有灵活的变动。那么，可以利用无序列表 <ul><li></li> </ul>的方式。
2、<ul> </ul> 标签就代表了一个无序列表，其中需要嵌套<li> </li>进行表示，例如： <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul>初次运行的时候，默认以纵向的方式进行列表的显示。看起来就像是一个树形导航，当然，我并没有在其中添加链接。
3、无序列表的默认显示方式为纵向，想要鸷拳林根改变显示方式就需要利用css样式进行改变。为了遵循XHTML的严格规范，做到css样式与Html文件内容分离。第一步就要先在同目录下创建一个css样式文件。然后在html中引入外部样式表。例如： <link rel="stylesheet" type="text/css" href="css样式文件的路径" />需要注意的是，在html 标签中的属性，一定要根据xhtml的严格标准添加双引号，这样可以培养自己良好的编码习惯，毕竟html的灵活性太大，甚至可以不添加结束标签也不会在浏览器中出现问题。但长期以往，就会发生无法估计的错误。
4、当引入了外部样式表以后，需要给<ul> 标签添加id 属性，或是class属性作为在样式文件中的标识。其中id 是整个html文件中唯一一个，且不能重复的标识，class属性则可以重复使用。一旦在多个标签中重复使用了class属性以后，那么在样式文件中需要用 点“属性值”的方式进行获取，这样一来，只要写明了 class 相同属性，样式文件中就会给所有的同名class添加样式。id属性在 css样式文件中，需要利用 #属性值 添加样式了解 id 以及 class 之后，就相当于迈进了 css 样式的第一步。
5、为了方便设置，在无序列釉涑杵抑表 <ul> 先设置id 属性，在css样式文件中用#选择到相关的id，设置 float:left; 样式以后，萋屁夙峁纵向显示的列表就会变为横向显示。但现在，无序列表中，还会存在黑色的圆点，可以设置 list-style:none;让黑色的圆点消失。在浏览器中运行以后，就会看到列表的效果。前面的黑点也消失了。例如：xx.html 代码 <ul id="uil"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul>xx.css 代码 #uil li { float:left; } #uil{ list-style:none; }
6、但这样看起来还是没有任何效果，只是显示文本一样。为此，我们就需要在<li></li>标签中嵌套<a> 超链接标签，超链接标签<a> 中，必须设置 href 属性才会变成一个超链接。href的属性值就是目标地址，#代表了链接到当前网页。
7、做完这些以后，就可以看到一个横向可点击的列表，去掉圆点以后，更像是一个简单的导航，但仍然需要利用其余的css样式进行设置，如果想要更好的学习，那就有必要去学习一下css。祝一切顺利~！
