CSS制作导航栏.docVIP

实验六 CSS制作导航栏 实验目的 掌握CSS的类选择器和派生选择器； 掌握导航栏的制作方法； 掌握CSS中伪类（Pseudo-Classes）的使用。 实验内容 使用CSS制作导航菜单栏； 使用伪类的属性使菜单动起来； 丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善； 制作一个绚丽的导航栏，应用到实验三中网站上。 实验仪器、设备 PC机最低配置：2G Hz以上CPU；1G以上内存；1G自由硬盘空间； Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器； Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。 实验要求 掌握CSS的类选择器和派生选择器； 掌握导航栏的制作方法； 掌握CSS中伪类（Pseudo-Classes）的使用。 实验步骤 CSS导航入门 在前几次实验中，我们的网站已经已经越来越完善了，但我们的还没有一个漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的菜单栏。这里我们要使用到CCS中伪类的特性，简单来说就是根据鼠标的状态来改变相关样式。 我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来，其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！OK！我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且字体颜色变成白色 制作导航菜单 新建一个html文档，我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；)，这个容器就是放我们的导航的，html代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title经典导航/title link rel=stylesheet type=text/css href=css.css/ /head body div id=nav /div /body /html 在html文档同一目录下建立css.css文件，CSS代码：#nav{ width:960px; height:35px; background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/ margin:0 auto;/*水平居中*/ margin-top:30px;/*顶部30px*/ } 为了页面在浏览器的兼容性，在CSS文件顶部加入标签重置代码，代码如下： body,div,ul,li{padding:0; margin:0;} 怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间div id=nav ul liCSS学习/li li学前准备/li li入门教程/li li提高教程/li li布局教程/li li精彩应用/li /ul /div CSS代码：#nav ul{ width:960px; height:35px; } 效果如下： 我们不希望我们的条目纵向排列，而是横向排列，怎么办呢？因为li标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个li，所以他们六个就像台阶似的纵向排列起来了。为了横向排列我们使li的浮动Float#nav ul li{ float:left;} 现在的效果还不是我们想要的，所有的“菜单项”都没有保持“间距”，后面的文字全部贴着前面的文字。好~！我们现在就将他们分开！设置li标签的宽度为100像素，修改CSS如下： #nav ul li{ width:100px; float:left; list-style:none; } 为了便于观察我们暂且将li标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围) #nav ul li{ width:100px; float:left; list-style:none; background:#900; } 我们的li标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个