CSS 制作网页导航条(下)

前端  /  管理员 发布于 7年前   128

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

但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条
【第四步】
我们需要将上面的导航条做以下几个修改
1）给上面的导航加上链接；
2）链接文字大小修改为12px;
3）并且规定链接样式，鼠标移上去和拿开的效果

修改方法如下
1）导航加链接，HTML代码如下：

复制代码代码如下:
<div id="nav">
<ul>
<li><a href="">CSS学习</a></li>
<li><a href="">学前准备</a></li>
<li><a href="">入门教程下载</a></li>
<li><a href="">提高教程</a></li>
<li><a href="">布局基础教程</a></li>
<li><a href="">精彩应用</a></li>
</ul>
</div>


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

复制代码代码如下:
a{font-size:12px;}


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

复制代码代码如下:
#nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}


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

到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！
我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤
首先把链接a加上一个背景，以方便看出来链接a的区域

复制代码代码如下:
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

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

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

复制代码代码如下:
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？！
原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码，闭上眼想想界面会变成什么样子？

复制代码代码如下:
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF;}

实际效果：

IE6和FF显示效果居然大相径庭，IE6中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过KwooJan认为，不用管谁标准不标准，那都是相对的，我认为IE标准，FF就不标准了呢，我不愿意在这个问题上浪费精力，我更喜欢将精力用在思考如何提高页面的浏览器兼容性！

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

复制代码代码如下:
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left;}

问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，特别是第二节的课，你没有真正理解！怎么做，你应该知道....回去再品品去

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

复制代码代码如下:
#nav ul li a{display:block; height:35px; 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; color:#333; text-decoration:none; float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}

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

效果好多了吧，这下是我们想要的效果了吧~
当然！大家还可以把背景不设置成黑色，用个图片也可以！现在大家明白，为什么一开始我说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗！

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

下节节课我将给大家用浮动方法布局一个页面，敬请期待！
/201001/yuanma/cssxuexi_daohang5.rar