用ul、li标签 创建css横向导航菜单？
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。
现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。
<div id="nav">
<ul>
<li><a href="http://www.52css.com/">HomePage</a></li>
<li><a href="http://www.52css.com/">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/">CSS布局实例</a></li>
<li><a href="http://www.52css.com/">CSS2.0教程 </a></li>
<li><a href="http://www.52css.com/">CSS在线手册</a></li>
<li><a href="http://www.52css.com/">Web标准</a></li>
<li><a href="http://www.52css.com/">XHTML教程</a></li>
</ul>
</div>
我们再看看关于这段CSS代码：
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
whitewhite-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
我们来看看上面的代码的完整HTML，复制出来放到一个HTML页面中，大家可以看到效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52css.com</title> 
<style type="text/css"> 
<!-- 
#nav { height: 30px; width: 100%; background-color: #c00; 
} #nav ul { margin: 0 0 0 30px; padding: 0px; font-size: 12px; color: #FFF; line-height: 30px; white-space: nowrap; } #nav li { list-style-type: none; display: inline; } #nav li a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; color: #FFF; } #nav li a:hover { color: #ff0; background-color: #f00; } 
--> </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.52css.com/">HomePage</a></li> <li><a href="http://www.52css.com/">Div+CSS教程</a></li> <li><a href="http://www.52css.com/">CSS布局实例</a></li> <li><a href="http://www.52css.com/">CSS2.0教程 </a></li> <li><a href="http://www.52css.com/">CSS在线手册</a></li> <li><a href="http://www.52css.com/">Web标准</a></li> <li><a href="http://www.52css.com/">XHTML教程</a></li> </ul> </div> </body> </html>
下面我们来解析上面的代码：
xhtml代码首先定义了一个容器div id="nav"。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul id="nav"就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，如果我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。
#nav定义了窗口的宽高及背景颜色。#nav ul包含有margin和padding声明，字体及颜色声明。line-height: 30px;是非常重要的定义，如果取消掉行高的定义，我们的链接文字垂直居中就可能受到影响。white-space: nowrap;或许大家并不能理解有什么作用，它定义了强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
#nav li中的list-style-type: none;去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display: inline;声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的关键。
#nav li a和#nav li a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding: 7px 10px;它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。
---------------------------------------------------------------------------------------------------------------
1、传统div css布局与NAV css布局完整HTML源代码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>nav布局 在线演示 DIVCSS5</title>
<style>
ul,li{ padding:0; margin:0;list-style:none}
.nav{border:1px solid #000; width:510px; overflow:hidden}
.nav li{ line-height:22px; float:left; padding:0 5px;}
.nav li a:hover{ color:#F00}
/* 对class=nav设置黑色边框，鼠标滑过超链接文字为红色 */
nav{ border:1px solid #F00; width:520px; overflow:hidden}
nav li{line-height:22px; float:left; padding:0 6px;}
nav li a{ color:#F00}
/* 对nav设置红色边框，超链接位置为红色 */
nav.bg{ background:#CCC}
nav.bg li a{ color:#090}
/* 对nav设置class=bg，设置背景为灰色，超链接位置为绿色 */
</style>
</head>
<body>
<p>传统 div ul li布局导航条效果</p>
<div class="nav">
<ul>
<li><a href="http://www.divcss5.com/">网站首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li>
<li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li>
<li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li>
</ul>
</div>
<p> </p>
<p>html5 nav ul li布局导航条没有对nav加id和class 同时设置nav li a超链接文字字体颜色为红色字和红色框效果</p>
<nav>
<ul>
<li><a href="http://www.divcss5.com/">网站首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li>
<li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li>
<li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li>
</ul>
</nav>
<p> </p>
<p>html5 nav ul li布局另外加class=bg设置背景为灰黑色,超链接文字字体颜色为绿色</p>
<nav class="bg">
<ul>
<li><a href="http://www.divcss5.com/">网站首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li>
<li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li>
<li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li>
</ul>
</nav>
<!-- 以下HTML代码与案例HTML代码无关 -->
<p> </p>
<p> </p>
<p align="center"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- n728 --><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6057706211967641" data-ad-slot="8787106124"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></p>
<p> </p>
<p> </p>
<p>返回 <a href="http://www.divcss5.com/html5/h716.shtml">html nav教程</a>、 <a href="http://www.divcss5.com/html5/h716.shtml">下载html5 nav css布局案例</a>：http://www.divcss5.com/html5/h716.shtml</p>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
