本文主要包含网页,导航条等相关知识,佚名 希望在学习及工作中可以帮助到您
课程开始：
前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！
OK！我们要做的导航条的效果如下：
鼠标移动上去背景变黑，并且字体颜色变成白色
其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵
【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下：
HTML代码：
<div id="nav"></div>
CSS代码：
好~！做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字(把我们的酒杯换成一个大个的)，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个
前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！
OK！我们要做的导航条的效果如下：
鼠标移动上去背景变黑，并且字体颜色变成白色
其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵
【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下：
HTML代码：
<div id="nav"></div>
CSS代码：
好~！做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字(把我们的酒杯换成一个大个的)，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个