CSS制作导航栏.docx

看到这里我想大家应该知道如何让页面在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;}

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

当然！

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

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

最终CSS代码如下：

body,div,ul,li{padding:

0;margin:

0;}

a{font-size:

12px;}

#nav{

width:

960px;

height:

35px;

background:

#CCC;

margin:

0auto;/*水平居中*/

margin-top:

30px;/*顶部30px*/

}

#navul{

width:

960px;

height:

35px;

}

#navulli{

height:

35px;

float:

left;

list-style:

none;

line-height:

35px;

text-align:

center;

padding:

010px;

}

#navullia{display:

block;height:

35px;color:

#333;text-decoration:

none;float:

left;padding:

010px;}

#navullia:

hover{color:

#fff;text-decoration:

underline;background:

#000;}

5.4动手试一试

我们制作了一个基本的导航菜单栏，使用了基本CCS的一些属性。

大家基本了解了其主要只用的方法，在此基础上请制作自己的导航栏，并应用到实验三中建立的网站，使你的网站更绚丽！

提示：

不会美工没关系，这里给大家推荐几个漂亮的导航栏。

去看看，不要只会拷贝、粘贴，看看高手是如何制作菜单栏的？

他们的CSS是如何编写的？

使用了那些技术？

6实验报告要求

1）详细写出需要自己动手做的实验内容的步骤；

2）填写实验报告，将5.4要求的内容全部htm文件、图片打包提交；

3）提交文件名格式：

班级号-学号-姓名-实验六.rar；

7实验注意事项

1）看清实验指导书后再动手；

2）按实验指导书动手做实验的过程中要勤于思考；

3）实验中充分利用搜索引擎学习相关知识和解决问题，同时要掌握如何利用高级搜索功能快速找到相关网页。

8思考题

看到那么多绚丽动感的菜单，还使用什么样的技术？

9扩展阅读

用div+css布局来做页面相比用table来做页面当然是好处多多，所以div+css布局也成为最爱欢迎和关注的焦点。

然而div+css浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。

用div+css布局的网页在IE下显示一切正常,，可是在火狐（FireFox）浏览器里打开，本来好好网页一下子就全乱了。

让人怎么看?

这一定会影响到你的网站的推广，不利于搜所引擎的搜索，所以解决div+css浏览器兼容的问题是完全必须的。

9.1兼容性处理要点

1）DOCTYPE影响CSS处理；

2）FF:

设置padding后，div会增加height和width，但IE不会，故需要用!

important多设一个height和width；

3）FF:

支持!

important，IE则忽略，可用!

important为FF特别设置样式；

4）div的垂直居中问题:

vertical-align:

middle;将行距增加到和整个DIV一样高line-height:

200px;然后插入文字，就垂直居中了。

缺点是要控制内容不要换行；

5）在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:

30px!

important;margin:

28px;}

注意这两个margin的顺序一定不能写反，!

important这个属性IE不能识别，但别的浏览器可以识别。

所以在IE下其实解释成这样：

div{maring:

30px;margin:

28px}

重复定义的话按照最后一个来执行，所以不可以只写：

margin:

XXpx!

important;

9.2浏览器差异

1）ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：

list-style:

none;margin:

0px;padding:

0px;

其中margin属性对IE有效，padding属性对FireFox有效。

提示：

经验证在IE中，设置margin:

0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:

0px仅仅可以去除上下的空白，设置padding:

0px后仅仅可以去掉左右缩进，还必须设置list-style:

none才能去除列表编号或圆点。

也就是说，在IE中仅仅设置margin:

0px即可达到最终效果，而在Firefox中必须同时设置margin:

0px、padding:

0px以及list-style:

none三项才能达到最终效果。

2）CSS透明问题

IE：

filter:

progid:

DXImageTransform.Microsoft.Alpha（style=0,opacity=60）。

FF：

opacity:

0.6。

提示：

最好两个都写，并将opacity属性放在下面。

4）cursor:

handVScursor:

pointer

问题说明：

firefox不支持hand，但ie支持pointer，两者都是手形指示。

解决方法：

统一使用pointer。

5）字体大小定义不同

对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。

解决方法：

使用指定的字体大小如14px。

并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

9.3浏览器bug

1）IE的双边距bug

设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案：

在这个div里面加上display:

inline;

2）IE选择符空格BUG

IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。

而在FF中，加不加空格都可以正常处理。

9.4期待CSS3

关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。

一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。

很多情况下，FF和Opera的CSS解释标准更贴近CSS标准，也更具有规范性。

当然，至今为止CSS3还是依然蒙着神秘的面纱，迫不及待想一览其真面目的也不止你一个人，甚至是浏览器厂商都已经开始着手添加和完善很多新特性的支持了，尽管它们还没有真正的成文面世。

Opera和Safari在对CSS3新特性的迎合上份属先驱，而新版本的FF也宣称将会跟随这个趋势。

然后，一个很多人关心的问题：

“IE呢？

它会不会有什么动静？

”也许你已经猜到了，IE在这方面仍然是一如既往的落在了后头。

现在的网民仍以使用IE者居多，当Firefox、Opera或Safari已经支持纯CSS圆角，而IE却仍然厚着脸皮不加理会保持无视的时候，我想你还是会无奈的在是否使用CSS3上再三斟酌。