1、新建html頁面
打開html編輯軟件，新建一個(gè)html頁面。如圖：
2、添加導(dǎo)航標(biāo)簽
在<body>標(biāo)簽里新建一個(gè)<ul></ul>標(biāo)簽，然后在<ul>標(biāo)簽里添加幾個(gè)<li></li>標(biāo)簽。如圖：
3、在<li>標(biāo)簽內(nèi)添加文字。
在新建的<li>添加要顯示的內(nèi)容。如圖：
4、創(chuàng)建樣式標(biāo)簽
在<title>標(biāo)簽后新建一個(gè)<styletype="text/css"></style>標(biāo)簽。
5、創(chuàng)建橫向?qū)Ш降臉邮?/p>
在<style>標(biāo)簽里添加一個(gè)樣式類為：.navli{}，然后再.navli類中設(shè)置樣式背景顏色為紅色，浮動(dòng)為左浮動(dòng)，內(nèi)邊框上下為8px左右為15px，列表屬性為none，字體顏色為白色。
樣式代碼為：
navli{background-color:red;padding:8px15px;float:left;list-style:none;color:#fff;}
6、引用樣式類。
在<ul>標(biāo)簽內(nèi)添加，就可以讓nav下的<li>標(biāo)簽引用到設(shè)置好的樣式類。如圖：
7、查看效果。
把html文件保存后，使用瀏覽器打開即可看到橫向?qū)Ш讲藛涡ЧＨ鐖D：
1、a標(biāo)簽既可以當(dāng)作鏈接符號(hào)來用，本身也是行內(nèi)標(biāo)簽的一種，直接用a標(biāo)簽輸入文字，可以直接在橫排顯示。
2、可以做出如圖所示效果，橫排顯示的導(dǎo)航。
3、如果想要對(duì)整體的導(dǎo)航進(jìn)行移動(dòng)位置，可以對(duì)整個(gè)的a標(biāo)簽添加上一個(gè)大的盒子div，這樣對(duì)整體div的移動(dòng)就可以了。
4、如圖，對(duì)div添加居中，添加個(gè)描邊就直接影響到整個(gè)a標(biāo)簽內(nèi)容了。
5、我們還可以使用塊狀標(biāo)簽div來作為導(dǎo)航的一份子，如果中間有鏈接的時(shí)候需要a標(biāo)簽。
6、默認(rèn)的塊狀標(biāo)簽div是豎排排列的，就是會(huì)換行。
7、然后我們將div添加float:left；浮動(dòng)效果就好了。
8、這樣剛才的豎排導(dǎo)航就變成了橫排排列的導(dǎo)航頁了。
9、很多時(shí)候我們做導(dǎo)航會(huì)用到無序列表ul或者有序列表ol來制作導(dǎo)航，做法和div也是一樣的，如圖建立ulli標(biāo)簽；將li添加浮動(dòng)效果。
10、再添加些邊框值，這樣一個(gè)導(dǎo)航頁也好了。