对于初学者来说，想要制作自定义的导航栏，就必须掌握以下方法
工具/原料
HBuilder
记事本
方法/步骤
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中引入外部样式表。例如：<linkrel="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代码<ulid="uil"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li></ul>xx.css代码#uilli{float:left;}#uil{list-style:none;}
6、但这样看起来还是没有任何效果，只是显示文本一样。为此，我们就需要在<li></li>标签中嵌套<a>超链接标签，超链接标签<a>中，必须设置href属性才会变成一个超链接。href的属性值就是目标地址，#代表了链接到当前网页。
7、做完这些以后，就可以看到一个横向可点击的列表，去掉圆点以后，更像是一个简单的导航，但仍然需要利用其余的css样式进行设置，如果想要更好的学习，那就有必要去学习一下css。祝一切顺利~！