我的书签
添加书签
移除书签13.3 使用CSS设计网站导航栏
网站导航是网站中最重要的元素，是网站提供给浏览者最直接、最方便的访问网站内容的工具。总的来说导航的核心目标是设计一个简单快捷的操作入口，帮助浏览者快速找到网站中的内容，设计时应当根据网站类型及内容的需求设计合理的导航形式。这里将使用CSS对常用的三种导航形式进行设计，看看CSS是如何实现这些样式的。
13.3.1 实现背景变换的导航菜单
导航也是一种列表，每个列表数据就是导航中的一个导航频道，使用ul元素以及li元素以及CSS样式可以实现背景变换的导航菜单，具体操作步骤如下：
1 打开HTML文档，在<head>与</head>之间相应的位置输入以下代码。
提示
利用#button定义div的样式，包括宽度、右边框、填充的复合属性、字体、字号、背景颜色和字体颜色。
利用#button ul定义div下的ul对象的样式，包括列表属性list-style、边距margin、填充padding、边框border属性。
利用#button li定义li对象的样式。
利用#button li a定义li对象下的链接文字样式。
利用#button li a:hover定义li对象下的链接文字激活样式。
2 在网页中<body>与</body>之间相应的位置输入如下代码：
提示
在代码中首先为div定义一个id为button，然后利用ul创建列表数据。
ul是CSS布局中使用得很广泛的一种元素，主要用来描述列表型内容，每一个<ul></ul>中的内容为一个列表块，块中的每一条列表数据用<li></li>来描述。
3 保存文档，在浏览器中预览效果，如图13.13所示。
图13.13 背景变换的导航菜单效果
13.3.2 利用CSS制作横向导航
利用CSS制作横向导航的具体操作步骤介绍如下。
1 打开HTML文档，在<head>与</head>之间相应的位置输入以下代码。
提示
首先定义了ul下的li对象，给#n li指定了float:left属性，所有的li对象都向左浮动，从而形成横向的排列形式。
导航的关键在于a链接对象的样式控制，在这里使用#n li a{}给li下的每一个a链接对象编写了样式。
display:block使得a链接对象的显示方式由一段文本变为一个块状对象，这样就可以使用CSS的外边距、内边距、边框等属性给a链接标签加上一系列的样式。通过display:block的应用，对a标签元素设置宽度width:65px、高度height:20px，并在每一个a标签对象之间使用margin-left:2px形成左侧的外边距为2像素。
利用#n li a:hover定义链接文字激活后的状态，利用background-color:#9999ff设置激活后的背景颜色，利用color:#ffffff设置文字的颜色。
2 在网页中<body>与</body>之间相应的位置输入如下代码。
提示
在ul列表数据下输入导航菜单文字。
3 保存文档，在浏览器中预览效果，如图13.14所示。
图13.14 横向导航效果
