|
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。 在传统方式下，制作导航菜单是很麻烦的工作。需要使用表格，设置复杂的属性，还需要使用JavaScript实现相应鼠标指针经过或点击动作。如果用CSS来制作导航菜单，实现起来就非常简单了。 一、简单的竖直排列菜单 当项目列表的list-style-type属性值为“none”时，制作各式各样的菜单和导航条便成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个案例，其效果如图1所示。 本案例文件位于网页学习网CSS教程资源中“第6章\04\vertical.htm”。  图1 无需表格的菜单 ① 首先建立HTML相关结构，将菜单的各个项用项目列表<ul>表示，同时设置页面的背景颜色，代码如下。 折叠XML/HTML 代码复制内容到剪贴板
② 然后开始设置CSS样式，首先把页面的背景色设置为浅色，代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
此时页面的效果只是最普通的项目列表。 ③ 设置整个<div>块的宽度为固定150像素，并设置文字的字体。设置项目列表<ul>的属性，将项目符号设置为不显示。 折叠CSS 代码复制内容到剪贴板
通过以上设置后，项目列表使显示为普通的超链接列表。 ④ 为<li>标记添加下边线，以分割各个超链接，并且对超链接<a>标记进行整体设置，如下所示。 折叠CSS 代码复制内容到剪贴板
以上代码中需要特别说明的是“display:block;”语句，通过该语句，超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。 ⑤ 最后设置超链接的样式，以实现动态菜单的效果，代码如下。 折叠CSS 代码复制内容到剪贴板
代码的具体含义都在注释中一一说明了，这里不再重复。此时导航菜单便制作完成了，最终的效果如图1所示，在IE与Firefox两种浏览器中的显示效果是一致的。lodidance.com 注意：此时在IE 6/7/8和Firefox中的显示效果是相同的，但是在IE 6中，虽然把链接设置成了块级元素，但是仍然只有在鼠标指针经过文字时，才能触发鼠标经过效果，而不是进入矩形区域就可以触发，在IE 7/8中已修正正了这个错误。在IE 6中，一个解决方案是在“#navigation li a”中增加一条设置高度的CSS规则： height:1em; 这样可强制浏览器重新计算相应鼠标指针的范围，就可以得到正确的结果了。 二、横竖自由转换菜单 导航条不只是竖直排列，很多时候需要页面的菜单能够在水平方向显示。通过CSS属性的控制，可以轻松实现项目列表导航条的横竖转换。 这里在上面一个例子的基础上仅做两处改动，就能实现一个自由转换的菜单。图2显示的是浏览器窗口比较宽的时候，菜单的水平排列效果；图3左图显示的是浏览器窗口很窄的时候，菜单的竖直排列效果；图3右图显示的是浏览器窗口宽度不宽不窄的时候，菜单的折叠排列效果。 本案例文件位于网页学习网CSS教程资源“第6章\04\horizontal.htm”。  图2 水平菜单  图3 水平菜单可以自由地转换为竖直菜单和折行菜单 这两处改动如下。 (1) 把width:120这条CSS规则从“#navigation”移动到“#navigation li a”中。这样，这个列表就没有宽度限制了，同时保证每个列表项的宽度都是120像素。 (2) 在“#navigation li”的的样式中增加一条“float:left;”。也就是使各个列表项变为向左浮动，这样它们就会依次排列，直到浏览器窗口容纳不下，再折行排列。 通过这两处小小的改动，就可以实现从竖直排列的菜单到自由适应浏览器宽度的菜单的转换了。对于Firefox和IE浏览器都是适用的。 读者通过这个案例是不是深刻地感受到了CSS的强大和灵活。可以套用一句俗语”只有想不到，没有做不到”。 本章重点 在本章中，主要介绍了超链接文本的样式设计，以及对列表的样式设计。对于超级链接，最核心的是4种类别的含义和用法；对于列表，需要了解基本的设置方法。这二者都是非常重要和常用的元素。在后面的案例中，几乎每个案例都离不开它们，因此一定要把相关的基本要点掌握熟练，为后面制作复杂的例子打好基础。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/688.html |
