html中<frameset>标签,框架结构…

2018-06-24 02:17:58来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

下面文章窗口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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:一招搞定css页面布局

下一篇:音视频和表单的详情