图书管理功能包4括大模块 ，16个子模块。
导航栏布局构造剖析四大模块：用一个<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.导航栏的框框
模块标签特点：
背景色background-color ：暗赤色；形状：长方块block 、宽width、高height,左边有突出小方块样式， 剖析为内边距padding。内容：字体font-family、字体颜色color、字体大小font-size, 垂直居中line-height=height边框：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;}
制作一个大略的导航栏，常用的便是列表格式。通过列表的嵌套和样式的修正，即可建立一个简约得体的导航列表。
以下附带部分样式源码：
HTML列表内容
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;}
