导航条制作.docx

^_^

对喽~用浮动Float！

可是让谁浮动呢，当然是

#navulli{float:

left;}

效果是不是和下面的一样呢

大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的

1）盒子（#nav）高度不一样

2）在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！

解决上面这两个问题，也很容易，如下

1）做到这里标签ul和li有没有进行重置？

只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:

0;margin:

0;}”

2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:

none;”就OK了

现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~

如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会

【第三步】

第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。

好~！

我们现在就将他们分开！

设置

CSS代码：

#navulli{

width:

100px;

float:

left;

list-style:

none;

}

为了便于观察我们暂且将

CSS代码：

#navulli{

width:

100px;

float:

left;

list-style:

none;

background:

#900;

}

效果如下：

瞧瞧，发现问题了吧，我们的

现在暂不把

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

line-height:

35px;

效果是不是和下图一样呢

好垂直居中解决了，轮到水平居中了，这个就容易了吧，直接在

text-align:

center;

怎么样，效果有点意思了吧~到这里我再发一次代码，保证大家每个步骤都学会！

好~！

做到这里，大家有没有想过一个问题，因为我们的

虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在

padding:

010px;

效果是不是这样

无论你的“杯子”是增大还是缩小，

怎么样有点意思吧~！

 我们将导航条做成了下面的效果

但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条

【第四步】

我们需要将上面的导航条做以下几个修改

1）给上面的导航加上链接；

2）链接文字大小修改为12px;

3）并且规定链接样式，鼠标移上去和拿开的效果

修改方法如下

1）导航加链接，HTML代码如下：

    

• CSS学习

      

• 学前准备

      

• 入门教程下载

      

• 提高教程

      

• 布局基础教程

      

• 精彩应用

  

2）文字大小12像素，CSS代码如下

a{font-size:

12px;}

3）鼠标移动上面和拿开效果

#navullia{color:

#333;text-decoration:

none;}

#navullia:

hover{color:

#fff;text-decoration:

underline;}

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接

到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！

我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤

首先把链接a加上一个背景，以方便看出来链接a的区域

#navullia{color:

#333;text-decoration:

none;background:

#0FF;}

怎么样，知道a的区域了吧

现在我要将a的高度设定为35px和盒子一样高度，这样我在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了

于是我插入下面红色的代码：

#navullia{height:

35px;color:

#333;text-decoration:

none;background:

#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？

！

原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:

block;”将内联元素转化成块状元素。

大家先不要加这段代码，闭上眼想想界面会变成什么样子？

#navullia{display:

block;height:

35px;color:

#333;text-decoration:

none;background:

#0FF;}

实际效果：

IE6和FF显示效果居然大相径庭，IE6中为什么所有链接纵向排列了呢？

其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面

看到这里我想大家应该知道如何让页面在IE6中显示的和FF中一样，很简单，只需要在a的CSS代码中加入“float:

left;”

#navullia{display:

block;height:

35px;color:

#333;text-decoration:

none;background:

#0FF;float:

left;}

问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，特别是第二节的课，你没有真正理解！

怎么做，你应该知道....回去再品品去

但是这样你不觉着，每个连接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？

还是很简单，只需要再加上一句话“padding:

010px;”

#navullia{display:

block;height:

35px;color:

#333;text-decoration:

none;background:

#0FF;float:

left;padding:

010px;}

现在再瞅瞅，是不是下面的效果

这样看看是不是不挤了吧，哈哈，看着舒服了吧，但是这离我们的想要的效果只有一步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将，a链接中的背景去掉，移到a:

hover的CSS代码中，并且颜色变成“#000”就ok了~

#navullia{display:

block;height:

35px;color:

#333;text-decoration:

none;float:

left;padding:

010px;}

#navullia:

hover{color:

#fff;text-decoration:

underline;background:

#000;}

怎么样，和下面的效果一样么？

效果好多了吧，这下是我们想要的效果了吧~

当然！

大家还可以把背景不设置成黑色，用个图片也可以！

现在大家明白，为什么一开始我说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗！

第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都很轻易作出来，如果你在和js很好的结合起来用~你就可以很自信的向老板提出加薪了！

！

！

^_^