导航栏效果图：

导航栏功能模块图

图书管理功能包4括大模块 ，16个子模块。

导航栏布局结构分析

1. 制作方式： 列表<ul><li>制作。

四大模块：用一个<ul><li></li></ul>列表制作出来，每个模块下面的四个子模块用同样的<ul><li></li></ul>列表嵌套出来。

具体格式如下：

<ul>
 <li>模块1
 <ul>
 <li>模块1.1</li>
 <li>模块1.2</li>
 <li>模块1.3</li>
 <li>模块1.4</li>
 </ul>
 </li>
 <li>模块2
 <ul>
 <li>模块2.1</li>
 <li>模块2.2</li>
 <li>模块2.3</li>
 <li>模块2.4</li>
 </ul>
 </li>
..........
</ul>

2.导航标签<a>：都是一个超链接，通过点击链接到相应的导航页面。

所以在每个列表选项中，都应该加入超链接<a>标签。

<ul>
<li><a href="javascript:;" >用户管理</a></li>
...
</ul>

3.导航框的修饰：CSS样式表

3.1 样式表接入方式：

• 行内样式
• 内嵌样式
• 链接式
• 导入式

一般用链接式<link >，运用高内聚，低耦合的思想。

<link rel="stylesheet" type="text/css" href="CSS/demo.css">

3.2标签选择器

行内选择器>id选择器>class选择器>标签选择器

常用到的为 id选择器、class选择器、标签选择器。

例如：

<ul>
 <li class="litems"><a href="javascript:;">用户管理</a>
 <ul class="uitems">
 <li><a href="javascript:;">添加用户</a></li>
 </ul>
 </li>
</ul>

具体用法见：HTML/CSS中可直接输数据的表格

4.导航栏的框框

模块标签特点：

1. 背景色background-color ：暗红色；
2. 形状：长方块block 、宽width、高height,左边有突出小方块样式， 分析为内边距padding。
3. 内容：字体font-family、字体颜色color、字体大小font-size, 垂直居中line-height=height
4. 边框：border：solid 1px #ff0；

litems类标签 中 <a>标签的样式如下：

 .litems>a
{
	background-color:#990020; /*背景色*/
	height:30px; 
	display:block; /*块显示*/
	line-height:30px; /*垂直居中*/
	border-left: solid 12px #711515; /*边框*/
	padding-left:5px; /*左边距*/
}

5.鼠标悬浮变化--- a:hover 属性

特点：鼠标悬浮时，字体变为黄色。

a:hover
{
	color:#FF0;
}

制作一个简单的导航栏，常用的就是列表格式。通过列表的嵌套和样式的修改，即可建立一个简约得体的导航列表。

以下附带部分样式源码：

CSS样式表源码：

*
{
 margin:0px;
 padding:0px;
 font-family:Arial, Helvetica, sans-serif;
}
body
{
	background-color:#C19F12;
}
a
{
	color:#FFF;
	text-decoration:none;
}
a:hover
{
	color:#FF0;
}
.litems
{
	width:200px;
}
.litems>a
{
	background-color:#990020;
	height:30px;
	display:block;
	line-height:30px;
	border-left: solid 12px #711515;
	padding-left:5px;
}
.litems >a:hover
{
	background-color:#990020;
}
.uitems li
{
	border:solid 1px #ED9F9F;
}
.uitems a 
{
	background-color:#E85070;
	height:30px;
	display:block;
	line-height:30px;
	border-left:solid 29px #A71F1F;
	padding-left:5px;
}
.uitems >a:hover
{
	background-color:#C2425D;
}