整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
导航栏
图书管理功能模块图
图书管理功能包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.导航栏的框框
模块标签特点：
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样式表源码：
篇文章将教大家如何编写导航栏，如果大家掌握之后，通过自定义样式，完全可以实现个性化的导航栏。
效果图
首先我们看下效果图，后面的编辑和查看导航也是相同的效果。
效果图
实现方式
接下来我们直接通过代码的方式来展示如何完成导航栏的编写
css部分代码
首先是div的通用样式
div通用样式
然后是鼠标悬浮的效果
鼠标悬浮效果
最后是菜单栏的效果
菜单栏效果
js代码控制菜单栏效果
首先是鼠标悬停和鼠标离开菜单时的效果
鼠标悬停和移除菜单栏
然后是关于高亮效果的展示和取消
高亮效果的显示和取消
最后是菜单栏被点击时的函数
点击菜单栏的函数
html部分代码
首先我们来看一下导航栏html代码
导航栏的html代码
然后是文件菜单的html代码
文件菜单的html代码
其次是编辑菜单的html代码
编辑菜单的html代码
最后是查看菜单的html代码
查看菜单的html代码
总结
至此，一个完整的自定义导航栏效果就完成了，如果觉得不好看的，完全可以自己设计样式让它更符合自己的品味，如果感兴趣的希望自己把代码试敲一遍，毕竟代码要自己实践才有效果。
航条效果图：
我们先来看一下，首先这个整体我们可以看成一个大盒子，盒子的背景颜色为白色。
然后看一下整体的话是占到整个导航条的80%左右，上图红色框圈出的范围。
这个盒子又分为两个部分，左侧的logo部分，右侧的导航部分。
整个布局用到的是flex布局：
大家可以去看一下阮一峰老师的教程：
阮一峰flex布局
左侧logo部分我们用到的标签有：
1、h3标签：
<h3><a href="index.html">多多鱼网页</a></h3>h3是一对有开始有闭合的标签组合。以<h3>开始，以</h3>结束。
html h3标签主要用于布局标题、栏目类内容，h3与h1最大标题标签相比，h1标签一般一个网页中使用一次，而h3标签可以在一个网页中多次使用。默认CSS h3又比h2文字大小小一点。
html h3标签常见应用地方：
栏目标题可以使用h3标签
文章标题可以使用h3标签
文章标题列表可以使用h3标签（一般图文列表中，图片使用img引入，文章标题文字使用h3标签）
2、a标签：
<a href="index.html">多多鱼网页</a><a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
右侧的导航部分我们用到的标签有：
一、无序列表简介
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的项目符号是●，不过可以通过无序列表type属性来改变无序列表的列表项符号。
语法：
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>说明：
<ul>，即“unordered list（无序列表）”。<li>，即“list（列表项）”。理解标签语义更有利于你记忆，而记忆HTML标签的语义是HTML的基础。
在该语法中，使用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。
注意，<ul>标签和<li>标签也是配合使用，没有单独使用，而且<ul>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签（对于初学者，我们忽略嵌套列表）。这个概念要非常清楚，在网站开发后期很容易犯错。（这个情况跟有序列表一样）。
右侧导航代码：
<ul>
<li class="active">
<a href="index.html">首页</a>
</li>
<li>
<a href="">网页模板</a>
</li>
<li>
<a href="">学习资料</a>
</li>
<li>
<a href="">常见问题</a>
</li>
<li>
<a href="">网页作业</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>视屏教程：
*请认真填写需求信息，我们会在24小时内与您取得联系。
