【网页布局技术】项目五 使用CSS设置导航栏

《CSS+DIV网页样式与布局案例教程》 徐琴

任务一 制作简单纵向导航栏

导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中，一般会应用CSS样式表来对导航栏进行设置和美化。本任务中，我们从最基础的纵向导航栏开始学习。

支撑知识点

1．合理利用display:block属性

display属性规定元素的显示类型，其具有多个不同的属性值，其中display:block表示将元素转换为块级元素。

2．利用margin-bottom设置间隔效果

在制作纵向导航栏或者列表一类的纵向HTML结构时，如果设计要求导航栏的每一项之间有一定间隔的时候，可以使用margin-bottom属性来实现这个效果。
对于单个的元素来讲，margin-bottom属性是设置此元素和它下面的元素的间隔，当此属性被设置在纵向菜单或者列表结构里面时，就可以产生均匀的间隔效果。

3．利用border设置特殊边框

特殊边框的设置并不困难，在项目四中，我们已经知道border可以对4个方向的边框分别进行设置。那么在设置边框的时候，可以单独设置一个方向的边框，也可以对多个方向的边框分别进行不同的样式设置。

任务二 制作简单横向导航栏

在本任务中，我们将通过制作简单横向导航栏，来继续学习制作导航栏的方法及一些CSS样式的使用。本任务将会使用到前一个任务中的一些步骤，同时会涉及到浮动、块元素等知识。

任务三 制作带图片效果的横向导航栏

通过前面2个任务的练习，大家已经对导航栏有了初步的了解，现在我们需要在前面2个例子的基础上，对导航栏进行更深入的学习，制作一个带有背景图片变换效果的横向导航栏，当将鼠标指针移动到导航栏的菜单项时背景会发生变化。

任务四 制作带下拉菜单的横向导航栏

本任务将要制作带下拉菜单的横向导航栏。该导航栏的制作比前面3个任务制作都要复杂一些。要在不使用javascript的情况下制作带下拉菜单的导航栏，需要合理利用CSS的display属性，通过设置display属性的值来完成菜单的显示和隐藏。

支撑知识点

1．用*号设置全局样式

对网页进行样式设置时，有时会遇到需要设置全局样式的情况，也就是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了一种解决方法，就是使用*{}选择器。由该选择器定义的样式，浏览器会视作页面上所有的内容都采用这个样式。

2．对特定标签下的子标签设置样式

一个网页中，通常会在不同的地方有相同的标签，比如2个不同class的<div>下面都可能会有超链接标签、列表标签等。要给这些不同位置的标签添加样式，一种方法是为这些不同位置的标签设置对应的class或id，但这样会使页面上有大量的class或id，不利于样式的处理；另外一种方法就是使用父标签加子标签的形式，也就是利用在项目二学习的嵌套选择器。其语法格式为：
父标签 子标签 孙标签 曾孙标签 …{}