实验六  CSS制作导航栏
1实验目的
1)掌握CSS的类选择器和派生选择器；
2)掌握导航栏的制作方法；
3)掌握CSS中伪类（Pseudo-Classes）的使用。
2实验内容
1)使用CSS制作导航菜单栏；
2)使用伪类的属性使菜单动起来；
3)丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善；
4)制作一个绚丽的导航栏，应用到实验三中网站上。
3实验仪器、设备
1)PC机最低配置：2G Hz以上CPU；1G以上内存；1G自由硬盘空间；
2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器；
3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。
4实验要求
1)掌握CSS的类选择器和派生选择器；
2)掌握导航栏的制作方法；
3)掌握CSS中伪类（Pseudo-Classes）的使用。
5实验步骤
5.1CSS导航入门
在前几次实验中，我们的网站已经已经越来越完善了，但我们的还没有一个漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的菜单栏。这里我们要使
用到CCS中伪类的特性，简单来说就是根据鼠标的状态来改变相关样式。
我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来，其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY  ！！！OK！我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且字体颜变成白
5.2制作导航菜单
新建一个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;}
怎么样，作出来了没有，效果是不是一个灰条，位于页面的正中间。盒子做好了，我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul，里面的每个单元格我们也给起个英文名字叫“li”。HTML代码如下：
<div id="nav">
<ul>
<li>CSS学习</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>标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，
经常会设置一下背景，就是这个道理，不然的话，你是发下不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低。现在暂不把<li>标签的背景去掉，当我们把它调成我们需要的效果的时候再去掉！继续，我们把li的高度设置成盒子的高度35像素：line-height:35px; 设置文本属性设置水平居中：text-align:center;
做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“菜单条目”的大小有所顾忌了！
虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，padding:0 10px;这里设置边距为10px，在<li>标签加上下面代码，顺便把背景颜去掉，此时css全部代码如下：
body,div,ul,li{padding:0; margin:0;}
#nav{
    width:960px;
    height:35px;
导航菜单    background:#CCC;
    margin:0 auto;/*水平居中*/
    margin-top:30px;/*顶部30px*/
}
#nav ul{
    width:960px;
    height:35px;
}
#nav ul li{
    height:35px;
    float:left;
    list-style:none;
    line-height:35px;
    text-align:center;
    padding:0 10px;
}
效果是不是这样：
无论你的“菜单条目”是增大还是缩小，<li>不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！
5.3增加导航链接
但是此时的导航条还没有链接，我们需要将上面的导航条做以下几个修改。
1）给上面的导航加上链接；
<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）链接文字大小修改为12px;
a{font-size:12px;}
3）并且规定链接样式，鼠标移上去和拿开的效果，使菜单具有动感。
#nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}
效果是不是和下面一样，鼠标移上去变成白的有下划线的链接，效果如下：
到这里，基本上一个导航条就出来了。但可能还是没有动感，我们希望鼠标移上去后，链接的背景变成黑的，首先把链接a加上一个背景，以方便看出来链接a的区域。
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}
现在我们要将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;}
IE内核浏览器下的效果：
Firefox下的效果：
IE和FF显示效果居然大相径庭，IE中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性--- 霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过不用管谁标准不标准，那都是相对的，认为IE标准，FF就不标准了呢，我们不愿意在这个问题上浪费精力，我们更喜欢将精力用在思考如何提高页面的浏览器兼容性！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。