CSS+HTML制作一个一般的导航栏-1.jpg (18.44 KB, 下载次数: 0)
2018-10-1 02:33 上传
导航栏效果图：
CSS+HTML制作一个一般的导航栏-2.jpg (30.48 KB, 下载次数: 0)
2018-10-1 02:33 上传
导航栏
导航栏功能模块图
CSS+HTML制作一个一般的导航栏-3.jpg (57.28 KB, 下载次数: 0)
2018-10-1 02:33 上传
图书管理功能模块图
图书管理功能包4括大模块 ，16个子模块。
导航栏结构结构阐发
1. 制作体例： 列表
- 制作。四大模块：用一个
具体格式如下：
- 模块1
- 模块1.1
- 模块1.2
- 模块1.3
- 模块1.4
- 模块2
- 模块2.1
- 模块2.2
- 模块2.3
- 模块2.4
- ..........
- 2.导航标签：都是一个超链接，通过点击链接到相应的导航页面。
所以在每个列表选项中，都应该加入超链接
...3.导航框的修饰：CSS样式表
3.1 样式表接入体例：
行内样式 内嵌样式链接式 导入式
一般用链接式，运用高内聚，低耦合的思想。
3.2标签选择器
行内选择器>id选择器>class选择器>标签选择器
经常使用到的为 id选择器、class选择器、标签选择器。
例如：
具体用法见：HTML/CSS中可直接输数据的表格
4.导航栏的框框
模块标签特点：
CSS+HTML制作一个一般的导航栏-4.jpg (3.35 KB, 下载次数: 0)
2018-10-1 02:33 上传
CSS+HTML制作一个一般的导航栏-5.jpg (11.19 KB, 下载次数: 0)
2018-10-1 02:33 上传
布景色background-color ：暗红色；形状：长方块block 、宽width、高height,左边有突出小方块样式， 阐发为内边距padding。内容：字体font-family、字体颜色color、字体巨细font-size, 垂直居中line-height=height边框：border：solid 1px #ff0；
litems类标签 中
.litems>a{ background-color:#990020; /*布景色*/ height:30px; display:block; /*块显示*/ line-height:30px; /*垂直居中*/ border-left: solid 12px #711515; /*边框*/ padding-left:5px; /*左边距*/}5.鼠标悬浮转变--- a:hover 属性CSS+HTML制作一个一般的导航栏-6.jpg (7.62 KB, 下载次数: 0)
2018-10-1 02:33 上传
鼠标未悬浮状态
CSS+HTML制作一个一般的导航栏-7.jpg (8.5 KB, 下载次数: 0)
2018-10-1 02:33 上传
鼠标悬浮状态
特点：鼠标悬浮时，字体变成黄色。
a:hover{ color:#FF0;}
制作一个简单的导航栏，经常使用的就是列表格式。通过列表的嵌套和样式的修改，即可建立一个简约得体的导航列表。
以下附带部分样式源码：
CSS+HTML制作一个一般的导航栏-8.jpg (80.42 KB, 下载次数: 0)
2018-10-1 02:33 上传
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;}更多内容回复查看:
游客，如果您要查看本帖隐藏内容请回复
