当前位置: 移动技术网 > IT编程>网页制作>CSS > html中<frameset>标签,框架结构各窗口的父级菜单子级菜单关系

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

2018年03月11日  | 移动技术网IT编程  | 我要评论

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

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

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

 

 

 

 

制作这个网页需要八个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.

 

 

 

 

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

<!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区房间的选项,也就到了我们要到的终点站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>

 

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

 

 

 

 

 

 

 

 

当我们点击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>

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网