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

第7章使用CSS制作网站导航网站导航（Navigation）是一个通称，方便用户浏览网站信息和获取网站服务。它的基本作用就是让用户在浏览网站过程中不致迷失，并且可以方便地回到网站首页以及其他相关内容的页面。网站导航一般位于网站的banner下面或是网页的顶部。网站导航是网站中最重要的元素，主要有横向导航、纵向导航、下拉导航及多级导航等几种形式。本章将介绍如何使用CSS来制作各种美观实用的网站导航。7.1制作一个简单的横向文字导航条门户网站的主导航一般都是选用横向导航的形式。这是因为门户网站下方文字较多，而且每个频道又都有不同的样式区别，因此在顶部固定一个区域，设计统一风格又不占用过多空间的横向导航是最理想的选择。例如、及国内的新浪、网易、腾讯等网站都是采用此种导航形式。1．display属性2．list-style-type属性3．制作横向文字导航条的实例7.2制作方块导航条设计师天马行空的进行网页设计，导航条自然也不拘泥于一个简单的文字链接形式。方块导航条可以为设计师提供一些设计灵感。制作方块导航条，先制作一个最基本的水平导航条，然后在a元素的样式中使用background-color属性将其定义成有颜色的区块，最后使用a:hover达到当光标经过时改变其颜色的效果。下面分别讲解文本对齐属性的使用方法和具体实例应用。1．文本对齐属性2．制作方块导航条实例7.3制作标签式导航在简单的导航系统制作完成后，有必要再为导航增加更多丰富的可用性设计。它的导航采用的是类似文件夹标签的样式，这样的导航样式正是目前网站上常见的，既美观又能让用户非常方便地知道自己所处的位置。本节中也制作这样的一套导航系统。1．边框样式属性2．制作标签式导航实例7.4制作按钮导航条目前在网页中普遍出现的按钮可以分为两类：一种是有提交功能的按钮；另一种是仅仅表示链接的按钮。网站导航可以使用按钮形式来进行设计，这样的按钮实现的是一种从一个页面链接到另一个页面的功能。1．内边距属性2．制作按钮导航条实例7.5CSS盒模型及盒模型hackCSS盒模型（BoxModel）是从CSS诞生之时便产生的一个概念，对于网页中的大部分对象，实际呈现的形式都是一个盒子形状对象，即块状对象。在CSS设计过程中，要做的就是安排一个个盒子的内容。盒子的尺寸与类型：包含盒子的具体大小、边框及display的类型。盒子的布局：盒子中内容的流动方式、自身的浮动方式及是否绝对定位等。与其他元素的关系：两个盒对象排列时的边距累加及样式中的继承关系等。7.5.1盒模型尺寸一个完整的盒对象，由众多属性构成，每个属性在实际的盒对象显示中，占据不同的位置。对于盒对象而言，除去用于position的top、left、bottom和right属性，还有如下几点。margin的值将占据margin边界线到border边界线之间的区域。border的值将占据border边界线到padding边界线之间的区域。padding的值将占据padding边界线到内容边界线之间的区域。7.5.2盒模型hack了解了盒模型尺寸的计算原理之后，现在使用CSS模拟一个盒模型，观察盒模型会带来什么样的问题。在标准方式下，样式表应当如下。div.box{ border:20pxsolid; /*设置边框样式*/ padding:20px;/*设置内边距*/ margin:20px; /*设置外边距*/ background:#ffc; /*设置背景色*/ width:500px; /*设置宽度*/}7.5.3简单盒模型hack方法令人振奋的是，研究盒模型在不同浏览器下hack的时候，开发者也找到了另一种更简单的hack方法，称为SBMH（SimpleBoxModelHack，简单盒模型hack）。根据上面的代码，可以使用简单代码进行替代处理。div.box{border:20pxsolid;/*设置边框样式*/padding:20px;/*设置内边距*/margin:20px;/*设置外边距*/background:#ffc;/*设置背景色*/width:500px;/*设置宽度*/\width:580px;/*设置宽度，仅限在IE5.5浏览器下显示*/}7.6制作会动的长城形导航条长城形导航条，即像长城烽火台一个接一个似的导航条。基本原理都是使用列表元素制作横向导航条，重点是样式上的设计，效果如图所示。1．定位元素属性position定位元素属性position的语法结构如下。position:static|relative|absolute|fixed2．制作会动的长城形导航条实例3．兼容问题7.7制作基于背景控制的导航条现在结合背景控制的知识，可以尝试制作导航系统，并在此基础上对导航进行改进。基于第5章背景的基本控制方法和本章前面介绍的导航制作方法，制作一个基于背景控制的导航条。基于背景控制的导航条，就是利用a:link和a:hover等不同状态下显示同一张的背景图片，但是控制这张背景图片的不同坐标来实现交互性的导航系统。这样做的优点就在于优化代码，减小网页下载的文件量，既能减轻网络服务器端的负担，也能为浏览者打开网页减少不必要的时间等待。以一种形象化的图示表示。7.8制作左右自由伸展的导航条在7.7节的实例中，使用了图片翻转技术实现了带圆角的图片背景，并实现了交互效果。但是它却只能够做到使用同一个背景进行设计，并没有实现根据导航文字的长度，自由变化的圆角导航标签。本节将介绍一种新的方法，利用九宫格方式能够实现任意扩展的圆角样式的功能，改进导航系统，制作可以左右自由伸展的导航条，这种方法又叫做——滑动门技术（SlidingDoors）。7.8.1九宫格技术原理在一个3×3的表格之中，左上、右上、右下、左下分别放入4个圆角图案，内容放置在中间的方格中，其上下左右4个方向的方格放置用于拉伸的图案，最终形成了一种可任意变化大小的圆角方框。九宫格技术也是软件的外观设计中常用的技术之一，包括我们使用的Windows软件，打开的每一个窗口基本上都是使用九宫格方式进行的样式设计。在表格式布局中通过表格实现圆角样式，而CSS2.0本身是不提供圆角设计模式。注意：CSS3.0将提供直接对九宫格样式设计的支持。7.8.2制作自由伸展的导航条实例九宫格使用4个圆角图片的模式，是为了上下左右4个边都可以自由扩展，而对于导航标签来说只需要左右两个方向的扩展即可。按此原理导航的结构如左图所示。进一步优化这样的结构，使用二层嵌套完成，因为B和C或者A和B，都可以合在一起，使B部分延续得较长一些，因此滑动门结构应该如右图所示。2 7.9制作一个简单的纵向导航条纵向导航也是网站应用中的一种重要形式。所谓纵向导航，是指放置在网页左边或右边的从上至下排列的一种导航形式。现在希望设计一套纵向导航来帮助用户浏览网站。类似于电子商务网站，在每一个页面都需要一套辅助的导航系统来帮助用户查找各个分类的商品，这个时候纵向导航就能派上用场了。7.9.1使用ul、li列表标签制作导航条本章的7.1节讲解过制作横向导航的方法，是使用ul、li列表元素，默认情况下，呈现的效果便是导航项纵向排列。制作页面的XHTML代码。<ulid="navlist"><li><ahref="#">Itemone</a></li><li><ahref="#">Itemtwo</a></li><li><ahref="#">Itemthree</a></li><li><ahref="#">Itemfour</a></li><li><ahref="#">Itemfive</a></li></ul>7.9.2使用div+h1标签制作延续横向导航的设计思路，但换一种方式来组织我们的导航部分的XHTML结构代码。为了便于读者阅读，在本段代码中不再给每段文字加上链接<a>标签。这次的XHTML部分的代码与横向导航略有不同，没有继续使用ul和li标签，其实继续使用ul元素也能完好地实现纵向导航系统，但是在这里需要更多方法来展现CSS布局设计的灵活与方便性，以便于抛砖引玉，开拓更多的设计思想。1．h标签2．制作纵向导航条实例7.10制作分行导航条分行导航条是纵向导航的一种形式，主要特点就是在导航项之间加入了分割线。分行导航能够清晰地突出导航项之间的关系。7.11制作增亮导航条有一种交互效果，当光标移到某一区域的时候，该区域的背景颜色改变。导航系统同样可以应用这种交互效果，实现更人性化的用户体验。如图所示是一个使用了纵向导航，当光标经过时导航项变成橙色的网页。

7.12制作动感的导航条用一个简单的列表元素（list）和CSS制作不同的导航条，是本章的特色所在。现在就来看看当CSS用于简单的list时的强大威力。如图所示是一个使用了动感纵向导航条的网页。7.13制作下拉式导航条下拉式导航是网页设计中常用的导航形式，这种菜单形式能够充分利用页面现有空间隐藏与显示更多内容，并能对内容进行合理的分类显示，是一种非常优秀的导航形式。网站采用的是下拉式导航，如下图所示。7.13.1制作实例本节使用ul列表标签以及CSS实现样式制作下拉式导航系统，需要应用一段JavaScript脚本来实现下拉交互效果。7.13.2兼容问题为了符合Web标准，制作完成的页面至少需要在3个主流浏览器（IE7、Firefox、IE6）中测试。由于本书所有实例都是使用IE7作为默认浏览器预览的，所以现在需要在其他两个浏览器再做测试，预览效果。1．Firefox浏览器测试2．IE6浏览器测试7.14制作多级弹出导航条多级弹出导航系统，就是在纵向下拉弹出菜单导航基础上，添加了横向弹出菜单。简单地说，就是弹出菜单的复合应用。本节通过一个实例，讲解如何实现多级弹出导航的CSS设计。7.14.1制作实