首页 > 代码库 > 几种作横向导航栏的方法
几种作横向导航栏的方法
导航栏每个网站基本都有，形式也很多样，其中应用最多最广泛也是最常见的就是横向导航栏。
今天就说以下几种导航栏的形式。下面就给某个大学官网写个导航栏。
首先第一种就是用应用的比较广泛的一种，通过<ul></ul>de<li></li>来实现导航栏的功能。
1.<li></li>表单
代码：
<ul>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">首页</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">新闻网</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">学校概况</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">机构设置</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">师资队伍</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">科学研究</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">人才培养</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">招生就业</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">大学文化</a></li>
<li style="float:left;list-style:none;width:100px;"><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">国际交流</a></li>
</ul>
ps:<a href="http://www.mamicode.com/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="http://www.mamicode.com/HtmlPage.html"><div class="d">首页</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">新闻网</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">学校概况</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">机构设置</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">师资队伍</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">科学研究</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">人才培养</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">招生就业</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">大学文化</div></a>
<a href="http://www.mamicode.com/HtmlPage.html"><div class="d">国际交流</div></a>
</body>
ps:<a href="http://www.mamicode.com/HtmlPage.html"></a>为使导航栏各个标题为超链接，链接的都是当前页面，同时取消了超链接的下划线。
第三种方法现在用的较少，就是通过<table></table>来时先导航栏功能。因为这种方法局限性和短板太明显了，所以现在这种方法用的不是特别多。当然特定情况下<table></table>用起来很方便，这时候就派上用场了。
3.<table></table>
代码：
<table width="1100">
<tr align="center">
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">首页</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">新闻网</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">学校概况</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">机构设置</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">师资队伍</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">科学研究</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">人才培养</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">招生就业</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">大学文化</a></td>
<td><a href="http://www.mamicode.com/HtmlPage.html" target="_blank" style="text-decoration:none;">国际交流</a></td>
</tr>
</table>
ps:<a href="http://www.mamicode.com/HtmlPage.html"></a>为使导航栏各个标题为超链接。
三种方法都能实现导航栏的功能，它们各有优劣，大家需要根据需要和要求灵活运用~~~
几种作横向导航栏的方法