如果要用html加上css来制作导航条的话，难度不大，代码也不多要是用于学习的话建议自己用原生代码实现要是用于生产环境或项目上的话，建议采用bootstrap等前端框架，直接套用他们的导航栏代码即可，样式不仅好看代码也易读。

01首先打开SublimeText软件，新建一个html页面，在html页面中准备好html结构，如下图所示02接下来，我们在html的body结构中添加导航栏的内容，如下图所示03然后需要在style标签中用CSS定义导航条的样式，如下图所示写。

首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示 接下来我们在html的body结构里添加导航条的内容，如下图所示 然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示。

borderright solid 1px # textalign center font 14px arial，#39Microsoft Yahei#39，宋体，sansserif，tahoma fontweight bold lineheight 30px color # cursor pointer。