导航栏效果图:
导航栏
导航栏功能模块图
图书管理功能模块图
图书管理功能包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列表内容
领取专属 10元无门槛券
私享最新 技术干货