导航栏 Tab

我们要做的导航条的效果如下：鼠标移动上去背景变黑，并且字体颜色变成白色。
1。 我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放置我们的导航的盒子~代码如下：

HTML代码：<div id="nav"></div>CSS代码：#nav{    width:960px;    height:35px;    background:#CCC;/*为了便于查看区域范围大小，加个背景色*/    margin:0 auto;/*水平居中*/    margin-top:30px;/*距离顶部30px*/}

还有一点需要提醒的是，为了页面在浏览器中的兼容性，不要忘记在CSS文件顶部加入标签重置代码~

body,div{padding:0; margin:0;}

2.
HTML代码

<div id="nav">    <ul>        <li>W3Cfuns</li>        <li>厘米学院</li>        <li>培训课程</li>        <li>我要充电</li>        <li>前端职业生涯</li>        <li>课程答疑</li>    </ul></div>

CSS代码

#nav ul{        width:960px;        height:35px;}#nav ul li{ float:left;}

1）到目前这步，用到了两个新的标签ul和li，标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中，
“body,div,ul,li{padding:0; margin:0;}”
2）大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在ul标签的CSS属性中加入
“list-style:none;”就OK了。
3.
后面的文字全部贴着前面的文字。
好~！我们现在就将他们分开！设置 li 标签的宽度为100像素：
CSS代码：

#nav ul li{width:100px;float:left;}

为了便于观察我们暂且将 li 标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)
CSS代码：

#nav ul li{    width:100px;    float:left;    background:#f00;}

我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距（如果你不会，建议你看看这篇文章《两种方法实现垂直居中》），在 li 的CSS代码中再加入下面这句代码：

line-height:35px;

文字的垂直居中解决了，轮到水平居中了，这个就容易了，直接在 li 的CSS代码中再加入下面这句代码：

text-align:center;

4.导航条上的每一个项之间的距离应该是相等的，这才是我们要的，我们给li设置一个宽度为1px的右外边距：

margin-right:1px;

因为我们的 li 标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩自适应的，那这时候我们就需要去掉其宽度，这时候 li 的宽度就会缩小至文字的宽度，
如果我们这时再添加一些文字(把我们的酒杯换成一个大个的)，这个 li 也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了,虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在 li 标签的CSS代码内加上下面代码

padding:0 10px;

然后我们再将li的背景色和右外边距去掉，即可得到效果。
5.
1）给导航的每一项加上链接；
2）链接文字大小修改为12px;
3）并且规定链接样式，鼠标移上去和移出的效果；

制作方法：
1）导航加链接，为了使导航更具有真实性，我们这里就用“厘米学院”的真实网址，大家自己练习的时候，链接地址就随意了~
HTML代码：

<div id="nav">    <ul>        <li><a href="http://www.w3cfuns.com">W3Cfuns</a></li>        <li><a href="http://www.w3cstudy.com">厘米学院</a></li>        <li><a href="http://www.w3cstudy.com/course.aspx">培训课程</a></li>        <li><a href="http://www.w3cstudy.com/apply.aspx">我要充电</a></li>        <li><a href="http://www.w3cstudy.com/career.aspx">前端职业生涯</a></li>        <li><a href="http://www.w3cstudy.com/faq.aspx">课程答疑</a></li>    </ul></div>

2) 文字大小12像素，这里的文字指的是链接a，所以我们对a进行样式设置
CSS代码

a{font-size:12px;}

3）鼠标移动上面和移出效果，文字默认状态时黑色无下划线的链接，鼠标移至上方，链接颜色变为白色并带有下划线，鼠标移出后还原为默认状态。
CSS代码

#nav ul li a{color:#333; text-decoration:none;}#nav ul li a:hover{color:#fff;                 text-decoration:underline;}

注意：在这个例子中，我们可以将（2）和（3）合并
CSS代码

#nav ul li a{font-size:12px; color:#333; text-decoration:none;}#nav ul li a:hover{color:#fff; text-decoration:underline;}

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接。
6.
如果我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤：（1）把链接a加上一个背景，以方便看出来链接a的区域

#nav ul li a{font-size:12px; color:#333; text-decoration:none; background:#0FF;}

从上面可以看出，鼠标移至链接上“箭头”转换为“手”的有效区域就是亮蓝色区域，如果将a的高度设定为35px和盒子一样高度，那么这个有效区域的高度就会变为35px，这样用户体验比较好，现在网页上的导航条基本上都是鼠标移至这个区域“箭头”就会转换为“手”状，于是我给a设置一个高度“height:35px;”，代码如下：

#nav ul li a{height:35px; font-size:12px;  color:#333; text-decoration:none; background:#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，不起作用，这是为什么呢？！原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说到这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。

#nav ul li a{display:block; height:35px;             font-size:12px; color:#333;             text-decoration:none; background:#0FF;}

其实解决的方法也很简单，只需要在链接a的CSS代码中加入“float:left;”

#nav ul li a{display:block; height:35px;             font-size:12px; color:#333;             text-decoration:none; background:#0FF;            float:left;}

7.
每个链接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？还是很简单，只需要再加上一句话“ padding:0 10px;”

#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}

我们现在只需要将a链接中的背景去掉，移到a:hover的CSS代码中，并且颜色变成“#000”就ok了~

#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; float:left; padding:0 10px;}#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}

8.
每个链接之间不够紧凑，这个情况形成的原因在于给li设置了“padding:0 10px;”,解决方法就是将li的CSS样式表里的“padding:0 10px;”删除就可以了，这样每个链接就变得十分紧凑。
另外，根据实际情况，鼠标移动到链接上后，不需要下划线，那就去掉a:hover里面的“text-decoration:underline;”就可以了。