1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。
2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。
3、在新建的<a></a>内，添加横向导航要显示的内容。
4、在<title></title>下方添加一个<style type="text/css"></style>。
5、源文件html保存后，使用浏览器打开预览效果。
使导航条运用以下CSS样式后成横向显示，首先我们需要给这个导航条的li设置一个float属性，这样导航条就能够横向的显示，横向之后的间隔你可以通过给这个li这是width和height，或者是padding来实现，个人建议用padding，能实现等比的间隔，例子如下：
<html><head>
<style>
#nav{
width:900px
height:30px
}
#nav ul li{
float:left
padding:5px 30px //通过padding实现
}
#nav ul li{
float:left
width:60px //通过width实现
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">兴趣爱好</a>
</li>
<li>
<a href="index.php">好友印象</a>
</li>
<li>
<a href="register.php">会员注册</a>
</li>
<li>
<a href="dengtu.php">会员登录</a>
</li>
</ul>
</div>
</body>
</html>
