CSS＋HTML制作一个简单的导航栏

导航栏效果图：

导航栏

导航栏功能模块图

图书管理功能模块图

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

导航栏布局结构分析

1. 制作方式： 列表

制作。

四大模块：用一个

列表制作出来，每个模块下面的四个子模块用同样的

列表嵌套出来。

具体格式如下：

模块1

模块1.1

模块1.2

模块1.3

模块1.4

..........

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

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

用户管理

...

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

3.1 样式表接入方式：

行内样式

内嵌样式

链接式

导入式

一般用链接式

，运用高内聚，低耦合的思想。

3.2标签选择器

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

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

例如：用户管理添加用户

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

4.导航栏的框框

模块标签特点：

背景色background-color ：暗红色；

形状：长方块block 、宽width、高height,左边有突出小方块样式， 分析为内边距padding。

内容：字体font-family、字体颜色color、字体大小font-size, 垂直居中line-height=height

边框：border：solid 1px #ff0；

litems类标签 中 标签的样式如下：

{

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列表内容