幾種作橫向導航欄的方法
導航欄每個網站基本都有，形式也很多樣，其中應用最多最廣泛也是最常見的就是橫向導航欄。
今天就說以下幾種導航欄的形式。下面就給某個大學官網寫個導航欄。
首先第一種就是用應用的比較廣泛的一種，通過<ul></ul>de<li></li>來實現導航欄的功能。
1.<li></li>表單
代碼：
<ul>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">首頁</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">新聞網</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">學校概況</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">機構設置</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">師資隊伍</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">科學研究</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">人才培養</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">招生就業</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">大學文化</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">國際交流</a></li>
</ul>
ps:<a href="HtmlPage.html"></a>為使導航欄各個標題為超鏈接，鏈接的都是當前頁面，同時取消了超鏈接的下劃線。
第二種實現導航欄功能的方法就是通過<div></div>的橫向排列。
2.<div></div>
代碼：
<head>
<style type="text/css">
.d {
width:100px;
height:30px;
float:left;
line-height:30px;
text-align:center;
}
</style>
</head>
<body>
<a href="HtmlPage.html"><div class="d">首頁</div></a>
<a href="HtmlPage.html"><div class="d">新聞網</div></a>
<a href="HtmlPage.html"><div class="d">學校概況</div></a>
<a href="HtmlPage.html"><div class="d">機構設置</div></a>
<a href="HtmlPage.html"><div class="d">師資隊伍</div></a>
<a href="HtmlPage.html"><div class="d">科學研究</div></a>
<a href="HtmlPage.html"><div class="d">人才培養</div></a>
<a href="HtmlPage.html"><div class="d">招生就業</div></a>
<a href="HtmlPage.html"><div class="d">大學文化</div></a>
<a href="HtmlPage.html"><div class="d">國際交流</div></a>
</body>
ps:<a href="HtmlPage.html"></a>為使導航欄各個標題為超鏈接，鏈接的都是當前頁面，同時取消了超鏈接的下劃線。
第三種方法現在用的較少，就是通過<table></table>來時先導航欄功能。因為這種方法局限性和短板太明顯了，所以現在這種方法用的不是特別多。當然特定情況下<table></table>用起來很方便，這時候就派上用場了。
3.<table></table>
代碼：
<table width="1100">
<tr align="center">
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">首頁</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">新聞網</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">學校概況</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">機構設置</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">師資隊伍</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">科學研究</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">人才培養</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">招生就業</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">大學文化</a></td>
<td><a href="HtmlPage.html" target="_blank" style="text-decoration:none;">國際交流</a></td>
</tr>
</table>
ps:<a href="HtmlPage.html"></a>為使導航欄各個標題為超鏈接。
三種方法都能實現導航欄的功能，它們各有優劣，大家需要根據需要和要求靈活運用~~~
幾種作橫向導航欄的方法