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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181001A0TY2400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券