html导航栏制作特点,CSS+HTML制作一个一般的导航栏

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;}

更多内容回复查看:

游客，如果您要查看本帖隐藏内容请回复