欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html中标签,框架结构各窗口的父级菜单子级菜单关系

程序员文章站 2022-04-14 12:59:16
这个问题搞得我头大,并且在查过百度后各位大佬给出的解释我都不能理解,应该是我太白的原因,希望我写的能好理解。 下面文章窗口1、2、3,在代码里分别为chuangkou、chuangkou1、chuangkou2. 下面是我创建的一个及其简易html框架结构: 制作这个网页需要八个html文件,分别是 ......

  这个问题搞得我头大,并且在查过百度后各位大佬给出的解释我都不能理解,应该是我太白的原因,希望我写的能好理解。

下面文章窗口1、2、3,在代码里分别为chuangkou、chuangkou1、chuangkou2.

  下面是我创建的一个及其简易html框架结构:

html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系

 

 

 

 

制作这个网页需要八个html文件,分别是定义框架的文件:

<!DOCTYPE html>
<html>
<head><title>宾馆后台操作系统</title></head>

<frameset rows="30%,*" frameborder="1" borde="5" bordercolor="#446677">
<frame src="/application/index/view/index/guanli.html" name="chuangkou" scrolling="aulo" noresize>
<frameset cols="30%,70%">
<frame src="/application/index/view/index/zhufang.html" name="chuangkou1" scrolling="aulo" noresize>
<frame src="/application/index/view/index/afangjian.html" name="chuangkou2" noresize>

</frameset>

</frameset>
</html>

这段代码将网页分为三个部分我分别给他起的名字叫做name="chuangkou";name="chuangkou1";name="chuangkou2",也就是上面代码中加粗的代码:窗口、窗口1、窗口2.

 

 

 

 

下面是顶部选项窗口代码:

html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
p{font-size:30px;}
</style>
</head>
<body>
<font color="blue" align="center"><h1>宾馆后台管理系统</h1></font><br><br>
<p align="center">
<a href="/application/index/view/index/zhufang.html" target="chuangkou1">住房查询</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/application/index/view/index/xiaofei.html" target="chuangkou1">消费查询</a>
</p>
</body>
</html>

这段代码是顶部菜单栏也就是起名为name="chuangkou"的部分,标签<a>的住房查询和消费查询target的位置是第二个窗口的位置,可以理解为target是通道,当我们点击住房查询时,"zhufang.html"内的A区房间、B区房间的选项html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系,也就到了我们要到的终点站chuangkou1的位置。

 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="/application/index/view/index/afangjian.html" target="chuangkou2">A区房间</a><br>
<a href="/application/index/view/index/bfangjian.html" target="chuangkou2">B区房间</a>
</body>
</html>

 

 上面这段代码是窗口点击住房信息后的代码。

 

 

 

 

 

 

html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系

 

 

当我们点击A区房间后“afangjian.html”的信息就通过target进入到chuangkou2.

 

 

“afangjian.html”代码如下

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>这是A区房间</p>
<p>这是A区房间</p>
<p>这是A区房间</p>
<p>这是A区房间</p>
<p>这是A区房间</p>
<p>这是A区房间</p>
<p>这是A区房间</p>
</body>
</html>

 

 剩余的消费查询及B区房间的查询同理。

 

附其他代码

 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>这是B区房间</p>
<p>这是B区房间</p>
<p>这是B区房间</p>
<p>这是B区房间</p>
<p>这是B区房间</p>
<p>这是B区房间</p>
<p>这是B区房间</p>
</body>
</html>

 

消费查询代码

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="/application/index/view/index/paomian.html" target="chuangkou2">泡面</a><br>
<a href="/application/index/view/index/yinliao.html" target="chuangkou2">饮料</a>
</body>
</html>

 

泡面代码

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
<p>这是泡面消费</p>
</body>
</html>

饮料代码

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
<p>这是饮料消费</p>
</body>
</html>