第7章使用CSS制作网站导航

1、第第7 7章章 使用使用CSSCSS制作网站导航制作网站导航网站导航（网站导航（Navigation）是一个通称，方便用户浏览网）是一个通称，方便用户浏览网站信息和获取网站服务。它的基本作用就是让用户在浏览网站信息和获取网站服务。它的基本作用就是让用户在浏览网站过程中不致迷失，并且可以方便地回到网站首页以及其他站过程中不致迷失，并且可以方便地回到网站首页以及其他相关内容的页面。相关内容的页面。网站导航一般位于网站的网站导航一般位于网站的banner下面或是网页的顶部。下面或是网页的顶部。网站导航是网站中最重要的元素，主要有横向导航、纵向导网站导航是网站中最重要的元素，主要有横向导航、纵向导航、

2、下拉导航及多级导航等几种形式。本章将介绍如何使用航、下拉导航及多级导航等几种形式。本章将介绍如何使用CSS来制作各种美观实用的网站导航。来制作各种美观实用的网站导航。7.1 7.1 制作一个简单的横向文字导航条制作一个简单的横向文字导航条门户网站的主导航一般都是选用横向导航的形式。这门户网站的主导航一般都是选用横向导航的形式。这是因为门户网站下方文字较多，而且每个频道又都有不同的是因为门户网站下方文字较多，而且每个频道又都有不同的样式区别，因此在顶部固定一个区域，设计统一风格又不占样式区别，因此在顶部固定一个区域，设计统一风格又不占用过多空间的横向导航是最理想的选择。例如用过多空间的横向导航是

3、最理想的选择。例如、及国内的新浪、网易、腾讯等网站都是采用此种及国内的新浪、网易、腾讯等网站都是采用此种导航形式。导航形式。1display属性2list-style-type属性3制作横向文字导航条的实例7.2 7.2 制作方块导航条制作方块导航条设计师天马行空的进行网页设计，导航条自然也不拘设计师天马行空的进行网页设计，导航条自然也不拘泥于一个简单的文字链接形式。方块导航条可以为设计师提泥于一个简单的文字链接形式。方块导航条可以为设计师提供一些设计灵感。供一些设计灵感。制作方块导航条，先制作一个最基本的水平导航条，制作方块导航条，先制作一个最基本的水平导航条，然后在然后在a元素的样式中使用

4、元素的样式中使用background-color属性将其定义属性将其定义成有颜色的区块，最后使用成有颜色的区块，最后使用a:hover达到当光标经过时改变达到当光标经过时改变其颜色的效果。下面分别讲解文本对齐属性的使用方法和具其颜色的效果。下面分别讲解文本对齐属性的使用方法和具体实例应用。体实例应用。1文本对齐属性2制作方块导航条实例7.3 7.3 制作标签式导航制作标签式导航在简单的导航系统制作完成后，有必要再为导航增加更在简单的导航系统制作完成后，有必要再为导航增加更多丰富的可用性设计。多丰富的可用性设计。它的导航采用的是类似文件夹标签的样式，这样的导航它的导航采用的是类似文件夹标签的样式

5、，这样的导航样式正是目前网站上常见的，既美观又能让用户非常方便地样式正是目前网站上常见的，既美观又能让用户非常方便地知道自己所处的位置。本节中也制作这样的一套导航系统。知道自己所处的位置。本节中也制作这样的一套导航系统。1边框样式属性2制作标签式导航实例7.4 7.4 制作按钮导航条制作按钮导航条目前在网页中普遍出现的按钮可以分为两类：一种是目前在网页中普遍出现的按钮可以分为两类：一种是有提交功能的按钮；另一种是仅仅表示链接的按钮。网站导有提交功能的按钮；另一种是仅仅表示链接的按钮。网站导航可以使用按钮形式来进行设计，这样的按钮实现的是一种航可以使用按钮形式来进行设计，这样的按钮实现的是一种从

6、一个页面链接到另一个页面的功能。从一个页面链接到另一个页面的功能。1内边距属性2制作按钮导航条实例7.5 CSS7.5 CSS盒模型及盒模型盒模型及盒模型hackhackCSS盒模型（盒模型（Box Model）是从）是从CSS诞生之时便产生诞生之时便产生的一个概念，对于网页中的大部分对象，实际呈现的形式都的一个概念，对于网页中的大部分对象，实际呈现的形式都是一个盒子形状对象，即块状对象。在是一个盒子形状对象，即块状对象。在CSS设计过程中，要设计过程中，要做的就是安排一个个盒子的内容。做的就是安排一个个盒子的内容。盒子的尺寸与类型：包含盒子的具体大小、边框及盒子的尺寸与类型：包含盒子的具体大

7、小、边框及display的类型。的类型。盒子的布局：盒子中内容的流动方式、自身的浮动方盒子的布局：盒子中内容的流动方式、自身的浮动方式及是否绝对定位等。式及是否绝对定位等。与其他元素的关系：两个盒对象排列时的边距累加及与其他元素的关系：两个盒对象排列时的边距累加及样式中的继承关系等。样式中的继承关系等。7.5.1 7.5.1 盒模型尺寸盒模型尺寸一个完整的盒对象，由众多属性构成，每个属性在实一个完整的盒对象，由众多属性构成，每个属性在实际的盒对象显示中，占据不同的位置。对于盒对象而言，除际的盒对象显示中，占据不同的位置。对于盒对象而言，除去用于去用于position的的top、left、bot

8、tom和和right属性，还有如属性，还有如下几点。下几点。margin的值将占据的值将占据margin边界线到边界线到border边界线之间边界线之间的区域。的区域。border的值将占据的值将占据border边界线到边界线到padding边界线之边界线之间的区域。间的区域。padding的值将占据的值将占据padding边界线到内容边界线之间边界线到内容边界线之间的区域。的区域。7.5.2 7.5.2 盒模型盒模型hackhack了解了盒模型尺寸的计算原理之后，现在使用了解了盒模型尺寸的计算原理之后，现在使用CSS模模拟一个盒模型，观察盒模型会带来什么样的问题。在标准方拟一个盒模型，观察盒

9、模型会带来什么样的问题。在标准方式下，样式表应当如下。式下，样式表应当如下。div.box border: 20px solid; /*设置边框样式设置边框样式*/padding: 20px; /*设置内边距设置内边距*/margin: 20px; /*设置外边距设置外边距*/background: #ffc; /*设置背景色设置背景色*/width: 500px; /*设置宽度设置宽度*/7.5.3 7.5.3 简单盒模型简单盒模型hackhack方法方法令人振奋的是，研究盒模型在不同浏览器下令人振奋的是，研究盒模型在不同浏览器下hack的时的时候，开发者也找到了另一种更简单的候，开发者也找

10、到了另一种更简单的hack方法，称为方法，称为SBMH（Simple Box Model Hack，简单盒模型，简单盒模型hack）。）。根据上面的代码，可以使用简单代码进行替代处理。根据上面的代码，可以使用简单代码进行替代处理。div.boxborder: 20px solid; /*设置边框样式设置边框样式*/padding: 20px; /*设置内边距设置内边距*/margin: 20px; /*设置外边距设置外边距*/background: #ffc; /*设置背景色设置背景色*/width: 500px; /*设置宽度设置宽度*/width: 580px; /*设置宽度，仅限在IE5

11、.5浏览器下显示*/7.6 7.6 制作会动的长城形导航条制作会动的长城形导航条长城形导航条，即像长城烽火台一个接一个似的导航长城形导航条，即像长城烽火台一个接一个似的导航条。基本原理都是使用列表元素制作横向导航条，重点是样条。基本原理都是使用列表元素制作横向导航条，重点是样式上的设计，效果如图所示。式上的设计，效果如图所示。1定位元素属性position定位元素属性定位元素属性position的语法结构如下。的语法结构如下。position: static | relative | absolute | fixed2制作会动的长城形导航条实例3兼容问题7.7 7.7 制作基于背景控制的导航条

12、制作基于背景控制的导航条现在结合背景控制的知识，可以尝试制作导航系统，现在结合背景控制的知识，可以尝试制作导航系统，并在此基础上对导航进行改进。基于第并在此基础上对导航进行改进。基于第5章背景的基本控制章背景的基本控制方法和本章前面介绍的导航制作方法，制作一个基于背景控方法和本章前面介绍的导航制作方法，制作一个基于背景控制的导航条。制的导航条。基于背景控制的导航条，就是利用基于背景控制的导航条，就是利用a:link和和a:hover等等不同状态下显示同一张的背景图片，但是控制这张背景图片不同状态下显示同一张的背景图片，但是控制这张背景图片的不同坐标来实现交互性的导航系统。这样做的优点就在于的不

13、同坐标来实现交互性的导航系统。这样做的优点就在于优化代码，减小网页下载的文件量，既能减轻网络服务器端优化代码，减小网页下载的文件量，既能减轻网络服务器端的负担，也能为浏览者打开网页减少不必要的时间等待。以的负担，也能为浏览者打开网页减少不必要的时间等待。以一种形象化的图示表示。一种形象化的图示表示。7.8 7.8 制作左右自由伸展的导航条制作左右自由伸展的导航条在在7.7节的实例中，使用了图片翻转技术实现了带圆角节的实例中，使用了图片翻转技术实现了带圆角的图片背景，并实现了交互效果。但是它却只能够做到使用的图片背景，并实现了交互效果。但是它却只能够做到使用同一个背景进行设计，并没有实现根据导航

14、文字的长度，自同一个背景进行设计，并没有实现根据导航文字的长度，自由变化的圆角导航标签。本节将介绍一种新的方法，利用九由变化的圆角导航标签。本节将介绍一种新的方法，利用九宫格方式能够实现任意扩展的圆角样式的功能，改进导航系宫格方式能够实现任意扩展的圆角样式的功能，改进导航系统，制作可以左右自由伸展的导航条，这种方法又叫做统，制作可以左右自由伸展的导航条，这种方法又叫做滑动门技术（滑动门技术（Sliding Doors）。）。7.8.1 7.8.1 九宫格技术原理九宫格技术原理在一个在一个33的表格之中，左上、右上、右下、左下分的表格之中，左上、右上、右下、左下分别放入别放入4个圆角图案，内容放

15、置在中间的方格中，其上下左个圆角图案，内容放置在中间的方格中，其上下左右右4个方向的方格放置用于拉伸的图案，最终形成了一种可个方向的方格放置用于拉伸的图案，最终形成了一种可任意变化大小的圆角方框。九宫格技术也是软件的外观设计任意变化大小的圆角方框。九宫格技术也是软件的外观设计中常用的技术之一，包括我们使用的中常用的技术之一，包括我们使用的Windows软件，打开软件，打开的每一个窗口基本上都是使用九宫格方式进行的样式设计。的每一个窗口基本上都是使用九宫格方式进行的样式设计。在表格式布局中通过表格实现圆角样式，而在表格式布局中通过表格实现圆角样式，而CSS 2.0本身是本身是不提供圆角设计模式。

16、不提供圆角设计模式。注意：注意：CSS 3.0将提供直接对九宫格样式设计的支持。将提供直接对九宫格样式设计的支持。7.8.2 7.8.2 制作自由伸展的导航条实例制作自由伸展的导航条实例九宫格使用九宫格使用4个圆角图片的模式，是为了上下左右个圆角图片的模式，是为了上下左右4个个边都可以自由扩展，而对于导航标签来说只需要左右两个方边都可以自由扩展，而对于导航标签来说只需要左右两个方向的扩展即可。按此原理导航的结构如左图所示。向的扩展即可。按此原理导航的结构如左图所示。进一步优化这样的结构，使用二层嵌套完成，因为进一步优化这样的结构，使用二层嵌套完成，因为B和和C或者或者A和和B，都可以合在一起，

17、使，都可以合在一起，使B部分延续得较长一些，部分延续得较长一些，因此滑动门结构应该如右图所示。因此滑动门结构应该如右图所示。27.9 7.9 制作一个简单的纵向导航条制作一个简单的纵向导航条纵向导航也是网站应用中的一种重要形式。所谓纵向纵向导航也是网站应用中的一种重要形式。所谓纵向导航，是指放置在网页左边或右边的从上至下排列的一种导导航，是指放置在网页左边或右边的从上至下排列的一种导航形式。现在希望设计一套纵向导航来帮助用户浏览网站。航形式。现在希望设计一套纵向导航来帮助用户浏览网站。类似于电子商务网站，在每一个页面都需要一套辅助的导航类似于电子商务网站，在每一个页面都需要一套辅助的导航系统来

18、帮助用户查找各个分类的商品，这个时候纵向导航就系统来帮助用户查找各个分类的商品，这个时候纵向导航就能派上用场了。能派上用场了。7.9.1 7.9.1 使用使用ul ul、li li列表标签制作导航条列表标签制作导航条本章的本章的7.1节讲解过制作横向导航的方法，是使用节讲解过制作横向导航的方法，是使用ul、li列表元素，默认情况下，呈现的效果便是导航项纵向排列。列表元素，默认情况下，呈现的效果便是导航项纵向排列。制作页面的制作页面的XHTML代码。代码。Item oneItem twoItem threeItem fourItem five7.9.2 7.9.2 使用使用div+h1div+h

19、1标签制作标签制作延续横向导航的设计思路，但换一种方式来组织我们延续横向导航的设计思路，但换一种方式来组织我们的导航部分的的导航部分的XHTML结构代码。结构代码。为了便于读者阅读，在本段代码中不再给每段文字加为了便于读者阅读，在本段代码中不再给每段文字加上链接上链接标签。这次的标签。这次的XHTML部分的代码与横向导航略有部分的代码与横向导航略有不同，没有继续使用不同，没有继续使用ul和和li标签，其实继续使用标签，其实继续使用ul元素也能元素也能完好地实现纵向导航系统，但是在这里需要更多方法来展现完好地实现纵向导航系统，但是在这里需要更多方法来展现CSS布局设计的灵活与方便性，以便于抛砖引

20、玉，开拓更多布局设计的灵活与方便性，以便于抛砖引玉，开拓更多的设计思想。的设计思想。1h标签2制作纵向导航条实例7.10 7.10 制作分行导航条制作分行导航条分行导航条是纵向导航的一种形式，主要特点就是在分行导航条是纵向导航的一种形式，主要特点就是在导航项之间加入了分割线。分行导航能够清晰地突出导航项导航项之间加入了分割线。分行导航能够清晰地突出导航项之间的关系。之间的关系。7.11 7.11 制作增亮导航条制作增亮导航条有一种交互效果，当光标移到某一区域的时候，该区域有一种交互效果，当光标移到某一区域的时候，该区域的背景颜色改变。导航系统同样可以应用这种交互效果，实现的背景颜色改变。导航系

21、统同样可以应用这种交互效果，实现更人性化的用户体验。如图所示是一个使用了纵向导航，当光更人性化的用户体验。如图所示是一个使用了纵向导航，当光标经过时导航项变成橙色的网页。标经过时导航项变成橙色的网页。 7.12 7.12 制作动感的导航条制作动感的导航条用一个简单的列表元素（用一个简单的列表元素（list）和）和CSS制作不同的导航制作不同的导航条，是本章的特色所在。现在就来看看当条，是本章的特色所在。现在就来看看当CSS用于简单的用于简单的list时的强大威力。如图所示是一个使用了动感纵向导航条时的强大威力。如图所示是一个使用了动感纵向导航条的网页。的网页。7.13 7.13 制作下拉式导航

22、条制作下拉式导航条下拉式导航是网页设计中常用的导航形式，这种菜单形式能下拉式导航是网页设计中常用的导航形式，这种菜单形式能够充分利用页面现有空间隐藏与显示更多内容，并能对内容进行够充分利用页面现有空间隐藏与显示更多内容，并能对内容进行合理的分类显示，是一种非常优秀的导航形式。合理的分类显示，是一种非常优秀的导航形式。网站网站采用的是下拉式导航，如下图所示。采用的是下拉式导航，如下图所示。7.13.1 7.13.1 制作实例制作实例本节使用本节使用ul列表标签以及列表标签以及CSS实现样式制作下拉式实现样式制作下拉式导航系统，需要应用一段导航系统，需要应用一段JavaScript脚本来实现下拉交脚本来实现下拉交互效果。互效果。7.13.2 7.13.2 兼容问题兼容问题为了符合为了符合Web标准，制作完成的页面至少需要在标准，制作完成的页面至少需要在3个主个主流浏