第7章使用CSS制作网站导航摘要.pptVIP

第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.5 CSS盒模型及盒模型hack CSS盒模型（Box Model）是从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: 20px solid; /*设置边框样式*/ padding: 20px; /*设置内边距*/ margin: 20px; /*设置外边距*/ background: #ffc; /*设置背景色*/ width: 500px; /*设置宽度*/ } 7.5.3 简单盒模型hack方法 令人振奋的是，研究盒模型在不同浏览器下hack的时候，开发者也找到了另一种更简单的hack方法，称为SBMH（Simple Box Model Hack，简单盒模型hack）。根据上面的代码，可以使用简单代码进行替代处理。 div.box{ border: 20px solid; /*设置边框样式*/ padding: 20px; /*设置内边距*/ margin: 20px; /*设置外边距*/ background: #ffc; /*设置背景色*/ width: 500px; /*设置宽度*/ \width: 580px; /*设置宽度，仅限在IE