本章简介
上一章节中讲解了 background 属性的用法，以及两种主流的背景特效——页面图片整合技术以及滑动门技术，设计师可以使用这两种技术制作出多种页面背景特效，如平滑投票、Tab 导航菜单等。
在Web 应用中，除了布局设计外，页面导航栏的设计也是站点设计中的一个重要组成部分，网站中的页面导航栏用于使用户在浏览时有明确的方向，可以快速地链接到相关内容页面，从而节省用户查找页面的时间，提高访问效率。所以，页面设计时需要选择合适的导航菜单，从而使页面的视觉效果更加清晰，操作更加方便、快捷。页面导航的形式主要包括水平导航菜单、垂直导航菜单以及下拉式导航菜单等，本章内容即将详细地讲解上述导航菜单的制作过程。
核心技能部分
5.1 水平导航菜单 门户网站中主导航菜单通常使用水平导航菜单，这是因为门户网站中的内容比较多，而且每个频道都有不同的样式区别。因此在页面的顶部设计一个风格而且不占用过多空间的水平导航菜单是最理想的选择。水平导航菜单分为横向文本导航和tab导航两种风格。
5.1.1 横向文本导航 横向文本导航适用于页面频道丰富且风格多样的大型网站，如网易、腾讯、MSN等，图 5.1.1即为网易首页。
WEB入门.九 导航菜单_css横向文本导航实现思路：
使用 div搭建导航框架。网易的导航菜单主要分为站标和内容两部分，站标区不覆盖其他文字，可直接使用 img标签插入网易站标。使用 ul和 li搭建内容部分，ul 中使用两个 li方法分行显示内容块，再使用若干超链接定义菜单。
实现步骤：
（1） 使用 div和ul搭建导航菜单框架，代码如下：
代码语言：javascript复制
网站logo
（2） 向结构中添加内容，代码片断如下：
代码语言：javascript复制 5.1.1 Tab导航导航菜单文本内容较少时，建议使用tab导航。这样可以强化页面视觉效果，拍拍购物网站即采用该导航形式，如图 5.1.3所示。
WEB入门.九 导航菜单_导航_02实现思路：
使用 div搭建菜单容器，采用无序列表ul 和 li标签实现菜单结构，a标签定义内容；使用float属性定义 li标签为浮动元素，display属性结合width、height定义超链接大小。
实现步骤：
（1） 定义导航菜单结构，代码如下：
代码语言：javascript复制
（2） 定义无序列表样式规则，代码如下：
代码语言：javascript复制 5.1 垂直导航菜单 垂直导航是网站导航的另一种重要形式，它是指将导航菜单安放于页面左右两侧并进行自上而下排列的导航形式。一些大型购物网站如当当网、淘宝网等采用该导航形式进行商品分类，如图5.1.5所示。
WEB入门.九 导航菜单_导航_03垂直导航菜单形式多样，以下列举两种常见的垂直导航：箭头导航和提示信息导航。
5.1.1 箭头导航 箭头导航的主要优点在于导航的直观性，如图 5.1.6、图 5.1.7所示。
WEB入门.九 导航菜单_导航_04实现思路：
在 CSS 中，设置 span标签的宽度和高度为 0；加粗边框，设置上下边框的颜色为白色，左右边框的颜色为深色，实现代码如下。
5.1
代码语言：javascript复制