1、第一步，新建html页面在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、第五步，创建横向导航的样式代码在<style>标签里添加一个样式类为：.nav冷觋溪诠宽度为1200像素，在整个页面左右啥修药挣居中；.nav ul li清除掉li的自带样式，li的每个宽度为180像素，li左浮动，实现横向导航样式，背景为红色，高度为30像素，为了上下居中，行高应与li高度一致，文字左右居中；a标签去掉下划线，给字体颜色为白色。样式代码为：.nav{ width: 1200px; margin-left: auto; margin-right: auto;} .nav ul li{ list-style: none; width:180px; float: left; height: 30px; line-height: 30px; background: red; text-align: center; } .nav ul li a { text-decoration: none; color: #fff; }如图：
6、第六步，效果预览源文件html保存后，使用浏览器打开预览效果。如图：
7、所嘀芟苒疾有代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>横向导航</title> <style type="text/css"> .nav { width: 1200px; margin-left: auto; margin-right: auto; } .nav ul li { list-style: none; width: 180px; float: left; height: 30px; line-height: 30px; background: red; text-align: center; } .nav ul li a { text-decoration: none; color: #fff; } </style> </head> <body> <div class="nav"> <ul> <li> <a href="">横向导航</a> </li> <li> <a href="">横向导航</a> </li> <li> <a href="">横向导航</a> </li> <li> <a href="">横向导航</a> </li> <li> <a href="">横向导航</a> </li> <li> <a href="">横向导航</a> </li> </ul> </div> </body></html>